保持div跳起一条线float

Question

我目前正在研究一个响应式网页，它的工作非常好。唯一的问题是，当浏览器变小并且遇到div时，div将跳过一条线。这里是我的代码：

HTML：

<div id = "wrapper"> 
<div class = "divs"> 
This is div 1 
</div> 

<div class = "divs"> 
This is div 2 
</div> 

<div class = "divs"> 
This is div 3 
</div> 

</div> 

CSS：

.divs{ 
width:100px; 
float:left; 
background-color: red; 
margin-left: 10px; 
text-align:center; 
} 

#wrapper{ 
width:400px; 

} 

@media screen and (max-width:399px){ 
#wrapper{ 
width:100% 
} 
.divs{ 
width: 33.33%; 
} 

live example in jsfiddle

Answer 1

股利最终跳转行，因为你要添加一个10px的保证金，以每格的左。边距（和填充）被添加到元素的宽度，它们不包含在其中。所以宽度为30px，左边距为10px的div将占用40px的屏幕。

这个最简单的办法是改变你的宽度以适应保证金，则保证金设定为百分比，以及：

.divs{ 
    width: 100px; 
    float:left; 
    background-color: red; 
    margin-left: 3%; /* changed margin to % so is also responsive */ 
    text-align:center; 
} 


.divs{ 
    width: 30%; /*reduced width to accommodate margin */ 
}