如何用html + css做這樣的佈局？

Question

框是一些對象（按鈕，標籤，textarea）。格林的大小是動態的。特別是藍盒子底部有問題。

Answer 1

Here's my solution →

這裏的主要問題是，左欄不知道右欄有多高。

您可以將它們放在父項中（這將包裝兩列），但左側列不會知道父級的高度，因爲如果子元素的子元素只能展開到父元素的高度父元素的高度是明確設置的。

另外，這裏有兩個截然不同的列，所以我想嘗試將它們儘可能接近它們顯示的方式。將左欄放在右欄（綠框）內並不能準確地表示這是如何構成的。

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，這樣它就不會遮住按鈕。

Answer 2

See example of the following →

只要指定了藍色和紅色的寬度，你可以使用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; 
} 

Answer 3

將持有人繞過它，它會採取高度從'綠色'，並且只給予它們絕對值和最低值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/