如何用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/