如何垂直排列浮動元素

我想提出的是這個佈局： enter image description here

我想右下角字段集是底部對齊，所以它的底部將與左邊的字段集對齊。

它應該以不同的分辨率工作。

有沒有簡單的方法？或者我將不得不使用javascript來動態添加邊緣頂部？

代碼：

<div class="fieldSetsContainer"> 
<fieldset class="leftFieldSet">test 
    <br/>test 
    <br/>test 
    <br/>test 
    <br/>test 
    <br/>test 
    <br/> 
</fieldset> 
<div class="rightFieldSets"> 
    <fieldset>test2</fieldset> 
    <fieldset class="bottomRightFieldSet">test3</fieldset> 
</div>

CSS：

.rightFieldSets { 
float:left; 
width:34%; 
} 
.rightFieldSets fieldset { 
clear:left; 
width:89%; 
} 
.leftFieldSet { 
width:62%; 
float:left; 
margin-right:1px; 
} 
.bottomRightFieldSet { 
margin-top:6px; 
}

這裏是一個鏈接： http://jsfiddle.net/bbryK/

來源

2013-10-20 Ronen Festinger

divs的約束條件是什麼？寬度是常數還是流體？兩個右側div的高度是否可以高於左側div？ –

可以共享小提琴鏈接 –

我更新了你的小提琴：http：// jsfiddle。net/bbryK/1/ –

我的解決方案假定兩件事情：

右列有固定寬度。
左欄必須始終最高。

見http://jsfiddle.net/c3AFP/2/

HTML結構：

<div class="container"> 
    <div class="right"> 
     <fieldset class="top"></fieldset> 
     <fieldset class="bottom"></fieldset> 
    </div> 
    <fieldset class="left"></fieldset> 
</div>

CSS樣式：

.container { 
    position: relative; 
} 
.top, .bottom { 
    width: 300px; 
} 
.left { 
    margin-right: 300px; 
} 
.right { 
    float: right; 
    margin-left: 10px; 
} 
.bottom { 
    position: absolute; 
    bottom: 0; 
}

編輯：

這裏是與RI的解決方案按百分比尺寸GHT柱：http://jsfiddle.net/c3AFP/5/

編輯2：

這裏是一個基於表溶液其去除左列是最高的要求。使用vertical-align您可以調整較小元素相對於最高元素的位置：http://jsfiddle.net/c3AFP/7/

來源

2013-10-20 17:04:52 Gigo

謝謝，這是最接近的解決方案。但無法改進，因此您不必爲右欄定義固定寬度？其背後的理由是支持多種屏幕分辨率。最好是窗口大小調整。 –

添加了一個可變大小右列的解決方案，但現在我想起來了：爲什麼不使用表格？這也應該消除左欄最高的要求。 – Gigo

添加了基於表格的解決方案。 – Gigo

我給你上小提琴起點。請玩弄，做一些代碼，並共享相同的內容。

http://jsfiddle.net/vY462/

#one{width:200px;height:70px;border:2px solid black;float:left;} 
#two,#three{width:200px;height:25px;border:2px solid black;float:right;margin-top:5px;} 

<div id="one">1</div> 
<div id="two">2</div> 
<div id="three">3</div>

來源

2013-10-20 16:31:34

這是如何工作的不同的字體大小，這是我相信的要求？ –

你還沒有在任何地方提到字體大小的要求。請提一下。 – Badal

這裏沒有字體大小的要求，如果它很重要，但字段集的內容不是恆定的。 –

試試這個

FIDDLE

#main { 
    position: relative; 
    height: 100px; 
    width: 200px; 
    background: gray; 
    border: 5px solid black; 
    display: inline-block; 
} 
#top { 
    position: relative; 
    height: 40px; 
    width: 155px; 
    background: gray; 
    border: 5px solid black; 
    display: inline-block; 
    top: -60px;  
} 
#bottom { 
    position: relative; 
    height: 40px; 
    width: 155px; 
    background: gray; 
    border: 5px solid black; 
    display: inline-block; 
    left: -165px; 
}

來源

2013-10-20 16:44:18

謝謝，但身高不知道。我也嘗試在左邊的div中添加文本，並導致其中一個div消失。 –

好吧，很容易做到給我幾分鐘 –

http://fiddle.jshell.net/8NYRG/2/試試這個高度是百分比 –

如何垂直排列浮動元素

回答

相關問題