我有三个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
希望有帮助:)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。