Question

给出这样的结构：

<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;
}

每个@ 300px应该有3个“项目”，但项目包含2个项目。这是在Firefox 25上。为什么它们包装尽管技术上它们具有所需的确切空间？ Firebug报告所有div都有正确的像素宽度。

在纯CSS和简单的HTML中它可能有效，但这是一个复杂的网站，有许多其他元素/样式 - 尽管Firebug报告的元素宽度为270px + 30px边距和900px。

Answer 1

如果您想使用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>

See JSFIDDLE

Answer 2

原来这是一个经典的白空间元素问题。我删除了空格，现在问题已经消失了。

div不应该包含像素尺寸包装的div

2 个答案: