[英]How to do such layout with html+css?
盒子是一些物體(按鈕,標簽,textarea)。 格林的大小是動態的。 特別是我有一個問題,藍色框粘到底部。
在它周圍放置一個固定器,它將從“綠色”固定器獲得高度,並且僅給出它們的絕對值和底部0,無論你給元素的寬度是多少都無關緊要。
編輯:希望這適合你,浮動元素,綠色的一個,其余的左邊。
<div id="divHolder">
<label id="red">Label</label>
<button id="blue">Button</button>
<div id="green">
a
</div>
<br class="clearFloat" />
</div>
#divHolder {
width:300px;
position:relative;
}
#green {
height:300px;
background-color: green;
float:right;
}
#red {
background-color:red;
float:left;
position:absolute;
}
#blue {
background-color: blue;
bottom: 0;
position:absolute;
}
.clearFloat {
clear:both;
}
在這里查看: http : //jsfiddle.net/YA9yD/32/
只要指定了藍色和紅色寬度,就可以使用relative
位置和absolute
位置,如下所示:
<div id="green">
<label id="red">Label</label>
<button id="blue">Button</button>
</div>
#green {
position:relative;
}
#red {
width:100px;
position:absolute; left:-110px; top:0px;
}
#blue {
width:100px;
position:absolute; left:-110px; bottom:0px;
}
這里的主要問題是左側列不知道右側列的高度。
您可以將它們放在一起(將包裝兩列),但左側列將不知道父級的高度,因為子元素只能擴展到父元素的高度,如果父元素的高度是明確設定。
此外,這里有兩個不同的列,所以我想嘗試將它們分組盡可能接近它們的顯示方式。 將左列放在右列(綠色框)內並不能准確地表示它的結構。
HTML:
<div id="container">
<div id="labelDiv">
<label>I'm a label.</label>
<p>Text area, whatevs.</p>
</div>
<button>Hello</button>
<div id="greenBox">
<p>Green box text.</p>
</div>
</div>
CSS:
#container {
width: 610px;
overflow: hidden;
position: relative;
}
#labelDiv {
width: 300px;
float: left;
}
button {
position: absolute;
bottom: 0;
left: 0;
}
#greenBox {
width: 310px;
float: left;
}
所以左邊的所有東西(按鈕除外)都向左浮動,綠色框也向左浮動。 到目前為止很棒,但按鈕需要知道整個盒子的高度,以便它可以自己附着到底部。 因此,我們將overflow
設置為hidden
在外部容器上,以便它包裹浮動元素,並且將按鈕絕對定位到底部,使其與最高內部元素(綠色框)的底部完全對齊。
我還建議在#labelDiv
上設置一些margin-bottom
,這樣它就不會掩蓋按鈕。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.