适合浮动div的div（宽度）

我现在已经搜索了几个小时，找不到适合我的问题的可行解决方案，所以我可以给你一些建议。适合浮动div的div（宽度）

我想要的是一个div，它包裹了一些浮动div。包裹高度对我来说没有问题，但是如果浏览器被调整为宽度（即浮动元素跳下）的宽度，则宽度不会包装正确。

这里是一些示例代码：

HTML：

<div class="wrapper"> 

    <div class="block1"> 
    </div> 

    <div class="block2"> 
    </div> 
</div>

CSS：

body { 
    border: solid 1px green; 
} 

.wrapper { 
    border: solid 1px red; 
    display: table; 
} 

div { 
    display: block; 
} 

.block1 { 
    float: left; 
    width: 390px; 
    height: 390px; 
    background-color: blue; 
} 

.block2 { 
    float: left; 
    width: 390px; 
    height: 390px; 
    background-color: yellow; 
}

所以基本上我想要的包装div来总是有宽度的div内需。通过调整窗口大小并让右边的div跳到左边，这个例子中的包装div现在应该具有390px的宽度。

我需要这个解决方案，为一个响应式网站我正在努力，我需要它尽快。

纯粹的CSS解决方案将是首选，但JS或jQuery也可以。

来源

2012-11-18 Balfear

您希望父div的宽度在任何时候都是大约390的倍数？需要JavaScript，我想。 – Toni

不能使用宽度或最小宽度将div 780px保留在“桌面”上，然后在较低的屏幕宽度上导致块进行换行，将父级的宽度设置为390px。在有关媒体查询这些包裹和鲍勃你叔叔.....

HTH

来源

2012-11-18 15:11:14 LDJ

JavaScript是极有可能的唯一途径...

使用$(window).resize

和：Javascript Browser Width

一旦你知道浏览器的宽度，你可以划分可用空间并指定包装div的宽度，从而包装你的浮动div。

来源

2012-11-18 15:11:17

媒体查询也可以帮到.. –

添加

white-space: nowrap;

到.wrapper

来源

2012-11-18 15:25:32

您可以使用包装DIV一个CSS媒体查询。像这样：

@media (max-width: 783px) { 
.wrapper { 
    max-width: 390px; 
    } 
}

为例见this codepen：

来源

2012-11-18 15:27:55 keithwyland

thx为答案。不幸的是，即使在你链接的例子中，如果我调整窗口的大小，它并没有真正换到390px。当我调整它的尺寸足够小，以便正确的div跳到包装上时，它只是使用与身体相同的宽度。 LG – Balfear

这是因为你在div上设置了边框，所以你可以看到什么地方。您需要为您的实现计算自己的特定像素，但对于此示例，我已更新codepen以在媒体查询中使用最大宽度783px（以占据4 px值的边框）。 http://codepen.io/anon/pen/mgxBz – keithwyland

如何修改这个类

.wrapper { 
border: solid 1px red; 
display:table; 
**white-space:nowrap;** 
}

，或者如果你想使左格修复，也许因此，如果窗口大小的变化只有正确的div将调整大小

使这个为正确的div：

display: block; 
position: absolute; 
top:0; 
right:0; 
margin-left: *your_fixed_left* px;

来源

2012-11-18 15:29:00 heriawan

1.解决方案似乎不适合我在铬，因为正确的div甚至不会跳下来，当我调整我的窗口：/ – Balfear

如果您想隐藏内部div（使用该固定宽度：390px大小），请添加overflow：隐藏到.wrapper（您的内容）。如果您希望隐藏内部div（使用该固定宽度：390px大小），则可以使内部div不会跳到下方并保持位于右上方。必须指定包装div处的最小宽度） – heriawan

THX您所有帮助大家，

我最终通过阅读窗口的大小和手动设置包装宽度与一些JavaScript这样做。

谢谢！

来源

2012-11-18 19:22:32 Balfear

<div class="wrapper"> 

    <div style="display:table-row"> 

     <div class="block1"> 
     </div> 

     <div class="block2"> 
     </div> 

    </div> 

</div> 



.wrapper { 

    border: solid 1px red; 
    display: table; 

} 

.block1 { 

    display:table-cell; 
    width: 390px; 
    height: 390px; 
    background-color: blue; 

} 

.block2 { 

    display:table-cell; 
    width: 390px; 
    height: 390px; 
    background-color: yellow; 

}

来源

2012-11-20 07:11:09 Nandhakumar

适合浮动div的div（宽度）

回答

相关问题