0

我有一个像这样的简单设置：

<div id="div0">
 <div id="div1">Content</div>
 <div id="div2">Content</div>
</div>

中间的两个 div(1,2) 有 width:100% 和 max-width:390px 加上 floatLeft。当调整浏览器的大小时，div2 会向下跳一行，当宽度小于 390 时，它们都将开始调整大小。

我需要先调整到最小宽度，然后跳到第二行。

我怎么做？

编辑1：示例：http: //jsfiddle.net/dwDZx/

4

1 回答 1

1

这是您所问问题的响应示例。我更改了一些宽度，以便更容易理解示例并查看数字的来源。 http://jsfiddle.net/dwDZx/4/

我更改了不同响应式布局中的背景颜色，以向您显示在调整浏览器大小时哪个部分处于活动状态。

我对标记所做的唯一更改是在 div1 和 div2 中创建一个“内容”div。这让我可以设置边界。如果我将 div1 和 div2 的宽度设置为 50%并设置边框，那么总宽度将为 50%+2px（左 1px + 右 1px），这将导致浮动环绕。通过将边框放在内容 div 上，它将边框放在50% 的内部而不是外部。

CSS：

* { margin: 0; padding: 0; }

.content { border: 1px solid black; }

#div1, #div2
{
        float:left;
}

@media (min-width: 801px)
{
    #div1, #div2
    {
        width:          400px;
        background: green;
    }
}

@media (min-width: 400px) and (max-width: 800px)
{
    #div1, #div2
    {
        width: 49.9%;
    background: red;
    }        
}

@media (max-width: 399px)
{
    #div1, #div2
    {
        float: none;
        width: 100%;
    }
}

编辑：我考虑了一下并简化了一些事情。见http://jsfiddle.net/dwDZx/5/ CSS 变化如下：在父 div 上设置一个 max-width 为 div1+div2 的最大宽度。那么你只需要一种媒体状态：当它 < 400px 并且应该在一行时。

CSS：

* { margin: 0; padding: 0; }

.content { border: 1px solid black; }
#container { max-width: 800px; }

#div1, #div2
{
    float:left;
    width: 50%;
    background: green;
}

@media (min-width: 400px) and (max-width: 800px)
{
    #div1, #div2
    {
        background: red;
    }        
}

@media (max-width: 399px)
{
    #div1, #div2
    {
        float: none;
        width: 100%;
        background: blue;
    }
}
于 2012-12-20T18:57:57.723 回答