Expandable divs

我在div 1展開後，搞清楚如何獲得div 4以保持相同的位置。所有的div浮動離開，當我展開DIV 1擴大DIV 2還擴展留下2和4Expandable divs

之間的空白空間，我不能換1區，3和DIV 2 ，4在單獨的div

example

這是我使用的div風格：

.subcatagory { 
    float: left; 
    width: 150px; 
}

來源

2012-04-16 Exploit

你會支持哪些瀏覽器？ – fcalderan 2012-04-16 10:55:49

你能分享你的代碼嗎 – 2012-04-16 11:02:23

這是float的問題。爲此，您必須使用Js masonry。其他然後你必須確定你這樣的標記：

<div class="parent"> 
    <div class="long">1</div> 
    <div>3</div> 
</div> 
<div class="parent"> 
    <div>2</div> 
    <div>4</div> 
</div>

入住這http://jsfiddle.net/XhMtK/1/

來源

2012-04-16 10:57:17 sandeep

感謝它的完美運作。它是否受到每個瀏覽器的支持？ – Exploit 2012-04-16 11:20:45

是的，它支持每個瀏覽器 – sandeep 2012-04-16 11:21:34

下面將做你在找什麼。我把所有的原始divs設置在一個outter div中，設置它的寬度，這樣它就只能匹配2.然後我把兩個div，category（div1和div3屬於這個類）以及相互浮動的子類別分開。這裏有一些代碼來演示：

<html> 
<head> 
    <style type="text/css"> 
    #dvMain{ 
    width:305px; 

    } 

    .subcategory, .category{ 
     width: 150px; 
     border:solid black 1px 
    } 

    .subcategory{ 
    float: right; 
    } 

    .category { 
    float: left; 
    } 
    </style> 
</head> 
<body> 
    <div id="dvMain"> 
    <div id="dv1" class="category">1asadssadsad 
    sadsa 
    ds 
    adsad 
    sa 
    dsadsadsadsa 
    </div> 
    <div id="dv2" class="subcategory">2</div> 
    <div id="dv4" class="subcategory">4</div> 
    <div id="dv3" class="category">3</div> 
    </div> 
</body> 
</html>

來源

2012-04-16 11:11:47 GrantVS

回答

相關問題