不应该包装像素尺寸的div
不应该包装像素尺寸的div
提问于 2013-11-11 07:36:09
给定一个类似这样的结构：
<div id="container">
<div id="left-sidebar">
<div class="item">some stuff 300px wide</div>
<div class="item">some stuff 300px wide</div>
<div class="item">some stuff 300px wide</div>
</div>
</div>这样的风格：
#container {
width:1170px;
overflow: auto;
}
#left-sidebar {
width: 900px;
overflow: auto;
}
.item {
float: left;
margin-right:30px;
width:270px;
}这应该有3个“项目”，每个@ 300px，但项目包装在2个项目。这是在Firefox 25上。为什么他们包装，即使在技术上，他们有确切的空间所需的？Firebug报告所有div都有正确的像素宽度。
在纯CSS和简单的HTML中，它可能可以工作，但这是一个包含许多其他元素/样式的复杂站点-尽管Firebug报告的元素宽度为270px + 30px，边距和900px。
回答 2
Stack Overflow用户
发布于 2013-11-11 07:40:36
如果你想使用float:right，那么你必须把#right-sidebar放在源代码的第一位：
<div id="container">
<div id="right-sidebar">
some more stuff
</div>
<div id="left-sidebar">
<div class="item">some stuff 300px wide</div>
<div class="item">some stuff 300px wide</div>
<div class="item">some stuff 300px wide</div>
</div>
</div>Stack Overflow用户
发布于 2013-11-11 08:09:20
事实证明，这是一个典型的元素间空白问题。我删除了空格，现在问题就解决了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19896643
复制相关文章
相似问题
腾讯云开发者
