手風琴與浮動的divs

我的計劃是讓一些行與3個div相鄰，然後將左邊的手風琴頭替換掉，然後在三行下方打開每個div的內容，將頁面的其餘部分向下推。手風琴與浮動的divs

我嘗試過各種「位置」 possiblities但不可能得到它的工作我想要的方式到.. 更多的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>

來源

2012-11-07 mrgreen

您聲明存在問題，但您沒有描述行爲的哪一部分不是您想要的。而且，如果你使用類似[jsfiddle]（http://jsfiddle.net）的東西，人們可以更容易地看到發生了什麼，這樣人們只需點擊一下鼠標就可以看到它。 – eh9

我希望cont-div在前3個鏈接區域下方打開。現在它在它下面打開，如果我使用絕對位置，它不會推下頁面的其餘部分。我對JS非常陌生，基本只有CSS，所以你的幫助表示感謝！ http://jsfiddle.net/pCwxa/1/ – mrgreen

對於其他人來說，在問題的正文中靠近頂部的位置是很有用的。 – eh9

你有交替排列的順序，每個div.link交流與div.cont的div元素。相反，先把三個div.link，然後再三個div.cont。使用CSS clear確保第二組三個出現在新行中。

來源

2012-11-07 13:29:06 eh9

不起作用。「手風琴容器的標記需要成對的標題和內容面板」，那麼我怎樣才能連接它們呢？ – mrgreen

引用來自哪裏？ – eh9

它來自http://docs.jquery.com/UI/API/1.8/Accordion。 – mrgreen

手風琴與浮動的divs

回答

相關問題