1

私の計画は、アコーディオンヘッダーを置き換えて、3 つの div が隣り合って左に浮いている行をいくつか作成し、ページの残りを押し下げる 3 つの行の下にある各 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最初に 3 を置き、次に threeを置きdiv.contます。CSSclearを使用して、2 番目の 3 つのグループが新しい行に表示されるようにします。

于 2012-11-07T13:29:06.190 に答える