Question

我有一个简单的设置：

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

两个中间div（1,2）的宽度为：100％，最大宽度：390px加上floatLeft。调整浏览器大小时，div2会向下跳一行，当得到的数量减少时，宽度390将会开始调整大小。

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

我该怎么做？

Edit1：示例：http://jsfiddle.net/dwDZx/

Answer 1

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

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

我对标记的唯一更改是在div1和div2中创建一个“content”div。这让我设置了边框。如果我将div1和div2的宽度设置为50％ AND 设置边框，则总宽度将为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上的最大宽度设置为div1 + div2的最大宽度。那么你只需要一个媒体状态：因为它是＆lt; 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;
    }
}

切换位置前调整大小？

1 个答案: