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

div最终跳线，因为你在每个div的左边添加了10px的边距。边距（和填充）被添加到元素的宽度，它们不包含在其中。因此，宽度为30像素且左边距为10像素的div将占据屏幕的40像素。

最简单的解决方法是更改宽度以适应保证金，然后将保证金设置为百分比：

.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 */
}

让div跳过一条线浮

1 个答案: