我有三个div,我想在同一行显示。三者中的每一个都有不同的宽度和高度,它们不是直文本。我想左边一个(一直到左边),右对齐另一个(一直到右边),并将第三个(在包含div的中间,整个页面在这种情况下) )。
此外,我希望三个div垂直对齐到包含div的底部。我已经将它的垂直对齐方式与包含div的顶部对齐。
什么是最好的办法呢?
解决方法
通过将容器div设置为position:relative和the child divs到position:absolute可以绝对地将div放在容器的范围内。
这样就可以使用bottom:0px将所有垂直方向与容器底部对齐,然后使用左/右样式沿水平轴定位。
我设置了一个工作的jsFiddle:http://jsfiddle.net/Damien_at_SF/KM7sQ/5/和代码如下:
HTML:
<div id="container"> <div id="left">left</div> <div id="center">center</div> <div id="right">right</div> </div>
CSS:
#container { position:relative; height:400px; width:100%; border:thick solid black; } #container div { background:grey; width:200px; } #left { position:absolute; left:0px; bottom:0px; } #center { position:absolute; left:50%; margin-left:-100px; bottom:0px; } #right { position:absolute; right:0px; bottom:0px; }
注意:对于“center”div,margin-left = div的宽度的1/2
希望有帮助:)