Question

我正在构建我的网站的响应版本。

虽然我很高兴大多数浮动div都被强行拉下屏幕，但是我需要将几个div保持在彼此旁边，即使屏幕区域小于这些div的总宽度。在这种情况下，我想缩小它们，使它们适合屏幕。

基本上，这是布局：

[___DIV 1___|___DIV 2___|___DIV 3___]

我想确保当屏幕区域较小时，它们看起来不像：

[___DIV 1___|
___DIV2___|
___DIV3___]

但他们看起来像：

[div1|div2|div3]

每个div为float:left; width:220px; 这三个div位于另一个带有width:100%;

的容器div中

Answer 1

您可以将所有三个div放在一个容器div中，只在容器上设置float: left。

<div id="container" style="float: left">
    <div id="div1" style="width: 33%">...</div>
    <div id="div2" style="width: 33%">...</div>
    <div id="div3" style="width: 33%">...</div>
</div>
<div id="div4" style="float: left">...</div>

Answer 2

实现它的最佳方法是在该实例中指定宽度百分比。它应该看起来像：

float:left; width:33%;

它将解决您的问题。

Answer 3

您可以将width:220px;更改为width:33%

<div id="Main" style="float: left;width:100%;">  
<div id="div1" style="float:left; width:33%;background:yellow;"></div>
    <div id="div2" style="float:left; width:33%;background:blue;"></div>
    <div id="div3" style="float:left; width:33%;background:grey;"></div>
</div>

演示链接：HERE

Answer 4

所有其他答案均基于width属性的百分比值。

我在这里完全有另一个用途。由于您正在设计response布局，因此不应依赖于百分比值，尤其是当您尝试在一行中放入3个div时。您应该定义您瞄准的关键分辨率（例如智能手机，平板电脑 - 风景/肖像），并使用media queries在每个分辨率中设计您的布局。

使用33%方法时，您完全依赖于设备宽度。你永远不会知道div的确切宽度是什么，所以你无法预测其内容的行为。

修改您评论的方法可能如下所示

div.column { float: left; width: 33%; } @media only screen and (min-width:660px) { div.column { width: 220px; } }

Answer 5

将float:left; width:220px;更改为float:left; width:40%;

它应该阻止他们移动线。

Answer 6

将width:220px;更改为width:33%;。它会更灵活。每当您扩展Web浏览器时，三个div将保持彼此相邻。

Answer 7

你需要将这些div的宽度设置为百分比，33％将使它们根据其父元素进行缩放这是一个jsfiddle，希望它有所帮助！

.container{
    width:100%;
}
.third{
    float:left;
    width:32%;
    margin:0.65%;
}

http://jsfiddle.net/jcferrans/MSfmW/

如果容器div较小，则缩小浮动div

7 个答案: