我怎样才能浮动divs，以便它们扩展通过它们的容器？

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是1000像素为应容器。这样，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或所有的东西你需要做的是通过-1000px每次调整的story-row位置。

Answer 2

给一个width您.story-box

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

或者width: 990px;有这样的：