html - 我怎样才能浮动 div 以便它们扩展到它们的容器之外？

Question

<div class="story-container">
  <div class="story-box">
    <h3>News Item #2</h3>
    <h2>This is my second news item!!</h2>
  </div>
  <div class="story-box">
    <h3>Technical Development</h3>
    <h2>See Muppets on Your Band-Aid With New AR App</h2>
  </div>
  <div class="clear"></div>
</div>

我的 CSS 是：

.story-container {
    background: none repeat scroll 0 0 blue;
    margin: 0 auto;
    width: 1000px;
}

.story-box {
    float: left;
    margin-right: 10px;
}

我希望story-box's 在每个外部旁边，但目前他们不这样做。我怎样才能做到这一点？

编辑

我想story-box和容器一样是 1000px。这样，它story-box占据了容器的整个宽度，然后下一个在技术上超出了界限。

Answer 1

与其依靠float/clear来扩展story-container你的界限，不如添加一个新类story-row并将其宽度设置为非常大。

<div class="story-container">
  <div class="story-row">            
      <div class="story-box">
        <h3>News Item #2</h3>
        <h2>This is my second news item!!</h2>
      </div>
      <div class="story-box">
        <h3>Technical Development</h3>
        <h2>See Muppets on Your Band-Aid With New AR App</h2>
      </div>
  </div>
</div>
​

.story-container {
    background: none repeat scroll 0 0 blue;
    margin: 0 auto;
    width: 1000px;
    height: 100px;
    position: relative;
    overflow: hidden;
}

.story-row {
  width: 2000px; /* num of stories by 1000px */
  position: absolute;
}

.story-box {
    float: left;
    margin-right: 10px;
    position: relative;
    width: 1000px;
    height:100px;
}

http://jsfiddle.net/39uR8/17/

现在，如果您想使用 javascript 或其他方式将下一个故事滚动到视图中，您只需story-row每次调整 -1000px 的位置即可。

Answer 2

给width你一个.story-box

编辑：width: 490px;如果你想要半宽试试

或者width: 990px;有这个：