0

给定这样的结构：

<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。

4

2 回答 2

2

如果要使用，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>

见 JSFIDDLE

于 2013-11-10T23:40:36.130 回答
0

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

于 2013-11-11T00:09:20.490 回答