我有以下标记：
<html>
<body style="margin:0;padding:0">
<div>
<div style="border:3px solid red; width:70%; position:absolute; left:2.5%">Left</div>
<div style="border:3px solid blue; width:25%; position: absolute; left:72.5%">Right</div>
<div style="border:3px solid black; width:95%; margin: 0 auto">Bottom</div>
</div>
</body>
</html>
我想在这里实现的是三个div如下：
+---------------------------+--------+ |Left |Right | +---------------------------+--------+ |Bottom | +------------------------------------+
然而,在我的标记中,“底部”div与“左”和“左”重叠. “底部”的.
我应该如何设计这3个元素来实现这种效果呢？
请注意,“bottom”不是页面上的最后一个元素.我只想将“左”和“右”放在一行中,并使页面流继续从以下行进行默认定位.
编辑：除了接受的答案…如果您没有静态高度或由于某种原因不想硬编码,您可以实现类似的效果：
<div style="border:3px solid red; width:70%; position:absolute; left:2.5%">Left</div> <div style="border:3px solid blue; width:25%; margin-left:72.5%">Right</div> <div style="border:3px solid black; width:95%; margin: 0 auto">Bottom</div>
解决方法
原文地址：https://www.jb51.cc/html/231987.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
