我如何浮动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位于每个外围的旁边，但目前他们不这样做。我怎样才能做到这一点？

修改

我希望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;有这个：