Question

CSS - 当用户更改浏览器大小时，如何并排不进行换行？ http://jsfiddle.net/QWSHw/

<div class="a">
<div class="gridrow">
    <div class="griditem">a
    </div>
    <div class="griditem">b
    </div>
</div>

 .a{
background: black;
position: absolute;
top:10px;
width:100%;
}
.gridrow{
background: gray;
width:100%;
}
.griditem{
background: blue;
float:left;
width:300px;
height:300px;
}

Answer 1

由于您使用的是float: left，因此您唯一能做的就是为min-width

设置.gridrow规则

.gridrow{
    background: gray;
    width:100%;
    min-width: 600px;
}

当然，如果用户将浏览器窗口调整为小于600px，则会将最小屏幕尺寸设为600px，然后水平滚动条会显示。

Answer 2

在包含Div上设置min-width:。这将阻止它的大小减小到你的内容包围的程度。

Answer 3

我不确定你到底想要完成什么，但我猜你在谈论响应式或自适应设计。

您需要在＆＃39;％＆＃39;中设置宽度值而不是＆＃39; px＆＃39;，这将导致浏览器计算每个视口更改的宽度并相应调整

我建议您使用css框架：

twitter bootstrap

foundation3

CSS - 当用户使浏览器大小改变时，如何使<div>并排不包装？</div>

3 个答案: