将 border-right 与浮动一起使用时显示不正确
我在容器 div 内浮动了几个 div &第一个 div 的右侧有边框。它在没有边框的情况下正常工作，但是当我添加边框时，一切都变得混乱了。右侧容器内的文本显示在另一个 div 的边框下方。
为了向您展示我的意思，这是一张图片：
这是我的代码：
<div style="margin: 0px auto; width: 500px; border: 1px solid #000;">
<div style="width: 500px; border-bottom: 1px solid #000;">
<div style="float: left; width: 250px;">Resolution/Megapixels</div>
<div style="float: right; width: 250px;">Average Quality Size/Best Quality Size</div>
<div style="clear: both;"></div>
</div>
<div style="width: 500px; border-bottom: 1px solid #000;">
<div style="float: left; width: 250px; border-right: 1px solid #000;">0.5 megapixels</div>
<div style="float: right; width: 250px;">3x5 inches/NA</div>
<div style="clear: both;"></div>
</div>
</div>
编辑：
请忽略。我一发布这个就解决了。
I am floating a couple divs inside a container div & the first div has a border on the right. It works correctly WITHOUT the border, but when I add the border it all messes up & the text inside the container on the right displays itself under the border from the other div.
To show you what I mean here is a picture:
Here is my code:
<div style="margin: 0px auto; width: 500px; border: 1px solid #000;">
<div style="width: 500px; border-bottom: 1px solid #000;">
<div style="float: left; width: 250px;">Resolution/Megapixels</div>
<div style="float: right; width: 250px;">Average Quality Size/Best Quality Size</div>
<div style="clear: both;"></div>
</div>
<div style="width: 500px; border-bottom: 1px solid #000;">
<div style="float: left; width: 250px; border-right: 1px solid #000;">0.5 megapixels</div>
<div style="float: right; width: 250px;">3x5 inches/NA</div>
<div style="clear: both;"></div>
</div>
</div>
Edit:
Please disregard. Worked it out as soon as I posted this.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
你的边框使盒子太宽了。需要将左侧 div（带边框）设置为 249，使其与边框相加为 250px。
You're border is making the box too wide. Need to set the left div (with the border) to 249 so that it adds up to 250px with the border.
这是因为向元素添加边框会将边框宽度添加到元素宽度，因此您的边框使“3x5 英寸”实际上是 251px 宽，迫使其向下，因为它无法容纳在 500px 中的 250px 宽度元素旁边容器，只需将 250px div 之一减少 1px 至 249px
it is because adding a boarder to an element will add the border width to the elements width so your border is making the "3x5 inches" is actually 251px wide forcing it down as it can't fit next to a 250px width element in a 500px container, just reduce one of the 250px divs by 1px to 249px
NVM...我是个傻瓜。在我发布此内容后立即意识到，由于边框大小，我必须将第一个 div 的大小减小 1。
NVM... I'm a fool. Realized right after I posted this I had to decrease the first div's size by 1 because of the border size.