我认为这很简单,我需要将两个内部的div(绿色和蓝色)对齐到容器的底部(红色)。我希望不要使用绝对定位,我需要它是ie6,7,8 ff chrome safari等兼容。
<div style="border:1px solid red;"> <div style="border:1px solid green; width:20px; height:20px; float:left;"></div> <div style="border:1px solid blue; width:20px; height:30px; float:left;"></div> <div style="clear:both;"></div> </div>
我已经尝试使用vertical-align,但找不到一个简单的解决方案。
感谢帮助,p。
编辑这里是我尝试abs pos解决方案:
<div style="border:1px solid red; position:relative;"> <div style="border:1px solid green; width:20px; height:20px; float:left; position:absolute; bottom:0px;"></div> <div style="border:1px solid blue; width:20px; height:30px; float:left; position:absolute; bottom:0px;"></div> <div style="clear:both;"></div> </div>
解决方法
为什么不能使用绝对定位? Vertical-align不起作用(表除外)。使你的容器的位置:亲戚。然后使用底部绝对定位内部div:0;应该像一个魅力一样工作。
编辑zoidberg(我会更新答案)
<div style="position:relative; border: 1px solid red;width: 40px; height: 40px;"> <div style="border:1px solid green;position: absolute; bottom: 0; left: 0; width: 20px; height: 20px;"></div> <div style="border:1px solid blue;position: absolute; bottom: 0; left: 20px; width: 20px height: 20px;"></div> </div>