Аккордеон с плавающими div

Мой план состоит в том, чтобы несколько строк с 3 делителями рядом с плавающими слева заменяли заголовки аккордеона, а затем открывали содержимое каждого делителя ниже ряда из трех, сдвигая остальную часть страницы вниз.

Я испробовал различные возможности "позиционирования", но не смог заставить его работать так, как мне хотелось. Больше проблема с 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>
Источник

1 ответ

Вы получили div элементы расположены в чередующемся порядке, с каждым div.link чередуя с div.cont, Вместо этого поставьте три div.link сначала, а потом три div.cont, Использовать CSS clear чтобы убедиться, что вторая группа из трех появляется в новой строке.

Источник
Другие вопросы по тегам