Question

我的计划是让一些行有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>

Answer 1

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

手风琴与浮动的divs

1 个答案: