0

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

虽然我很高兴大多数浮动 div 被强制向下显示，但仍有一些 div 需要保持彼此相邻，即使屏幕区域小于这些 div 的总宽度。在这种情况下，我想缩小它们，使它们适合屏幕。

本质上，这是布局：

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

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

[___DIV 1___|
___DIV2___|
___DIV3___]

但它们看起来像：

[div1|div2|div3]

每个 div 是float:left; width:220px; 三个 div 位于另一个容器 div 内width:100%;

4

7 回答 7

2

All the other answers are based on percentage values of the width property.

I have completely another apporach here. Since you're designing a response layout you should not rely on percentage values especially when you're trying to fit 3 divs in one row. You should define key resolutions that you're aiming (e.g. smartphone, tablet - landscape/portrait) and design your layout in each of that resolution using media queries.

When using 33% method you're completely dependent on the device width. You'll never know what the exact width of a div will be so you can't predict how its content will behave.

EDIT: Approach from your comment might look like this

div.column {
    float: left;
    width: 33%;
}

@media only screen and (min-width:660px) {
    div.column {
        width: 220px;
    }
}
于 2013-09-25T09:09:24.783 回答
2

您可以将所有三个 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>
于 2013-09-25T08:53:36.763 回答
2

实现它的最佳方法是在这种情况下以百分比分配宽度。它应该看起来像：

float:left; width:33%;

它将解决您的问题。

于 2013-09-25T08:53:57.167 回答
2

您可以更改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>

演示链接：这里

于 2013-09-25T08:58:33.303 回答
1

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

它应该阻止他们移动线路。

于 2013-09-25T08:54:32.270 回答
1

更改width:220px;为width:33%;. 会更加灵活。每当您缩放 Web 浏览器时，三个 div 将彼此相邻。

于 2013-09-25T08:59:44.243 回答
1

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

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

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

于 2013-09-25T09:00:49.820 回答