1

我的计划是让一些相邻的 3 个 div 的行向左浮动，替换 Accordion-Headers，然后打开每个 div 的内容，使其低于一行三个，将页面的其余部分向下推。

我尝试了各种“位置”的可能性，但无法让它按照我想要的方式工作。更多的是一个 css 问题。或者最好不要使用手风琴？

jsfiddle.net/pCwxa/1

<!DOCTYPE html>
<html>
<head>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

  <script>
  $(document).ready(function() {
    $("#accordion").accordion({ collapsible: true },{ active: false });
  });
  </script>


<style type="text/css">

#link   {   background-color: grey;
    float: left; 
    height: 300px; 
    width: 280px;
    margin: 0 20px 80px 0px;
    }

#cont   {   top:320px;
    background-color: blue;
    height: 300px; 
    width: 880px;
    }           
</style>
</head>

<body>

<div style="width:900px; height:900px; margin-left:30px; margin-bottom:; border:1px solid red;   padding:0px;">

<div id="accordion">
<div id="link">
<h3><a href="#">Section 1</a></h3></div>
<div id="cont">
    <p>
    Blabla
</div>

<div id="link">
<h3><a href="#">Section 2</a></h3></div>
<div id="cont">
    <p>
    Blabla
    </p>
</div>

<div id="link"> 
<h3><a href="#">Section 3</a></h3></div>
<div id="cont">
    <p>
    Blabla
    </p>
</div>

<div id="link">

<h3><a href="#">Section 4</a></h3></div>
<div id="cont">
    <p>
    Blabla
    </p>
</div>
</div>


</div>

</body>
</html>
4

1 回答 1

0

您已将div元素按交替顺序排列，每个元素div.link与div.cont. 相反，div.link先放三个，然后放三个div.cont。使用 CSSclear确保第二组三个出现在新行上。

于 2012-11-07T13:29:06.190 回答