左浮动divs问题

Question

我对父div中的左浮动div有两个问题。 我在这个尝试过不同的东西上花了5个多小时，在互联网上搜索，但找不到解决办法！ 以为有人在这里可能会有所帮助。

这是场景：

<div id="parent_div">
<div class="left_floating" style="height:20px; width: 100%; clear:left;"><label style="text-align:center"> This is the title div </label></div> 
<div class="left_floating" style="height:50px; width:50px;"> 1 </div>
<div class="left_floating" style="height:20px; width:50px;"> 2 </div>
<div class="left_floating" style="height:20px; width:50px;"> 3 </div>
</div>

问题1：我想要的是：无论屏幕大小如何，标题始终位于其他三个div的中心。 会发生什么：如果你缩小屏幕的大小，在没有足够的空间用于div 3时，它会下降（这就是我想要的），但是在div 2的右边会有一些间隙这使父div的宽度大于100px（div的宽度1 + div 2的宽度），即父div不是从两侧紧。 这使得标题不在中心位置。 我怎样才能解决这个问题？

问题2：我想要的是：当屏幕缩小并且div 3下降时，它应该在div 1之下。会发生什么：div 3在div 2之下，因为div 2的高度小于div 1的高度。如果div 2的高度大于div 1的高度，结果将是理想的结果。 有什么建议么？

如果有的话，我更喜欢css解决方案。

谢谢

Answer 1

关于问题1：您可能希望通过媒体查询来解决这个问题。 听起来在某些分辨率下，你希望css的行为不同，这就是媒体查询的优点。 你可能会想要一些东西

@media (max-width: n px) {
    #parent_div {
        width: 100px;
    }

@media (min-width: n+1 px) {
    #parent_div {
        width: 150px;
    }

关于问题2：您可以创建一个div来包装div 2以使其具有更大的静态高度，因此div 3适当地浮动。 只需将包装器向左浮动，使div 2不浮动。

<div id="parent_div">
<div class="left_floating" style="height:20px; width: 100%; clear:left;">
    <label style="text-align:center"> This is the title div </label>
</div> 
<div class="left_floating" style="height:50px; width:50px;"> 1 </div>
<div style="float:left; height:50px; width:50px;">
    <div class="left_floating" style="float:none; height:20px; width:50px;"> 2 </div>
</div>
<div class="left_floating" style="height:20px; width:50px;"> 3 </div>
</div>

Answer 2

您可以使用媒体查询实现所需的功能。 以下是使用您提供的标记的示例： http ： //jsfiddle.net/VQMrY/1/

请注意我所做的CSS更改：使标签成为块元素和媒体查询（基于屏幕宽度，将显示结果）。 我把边框放在元素周围，这样它们就更容易看到了。 我还在父容器中添加了一个clr类。

在媒体查询中，我将div'''设置为向右浮动，这样你就没有那个间隙然后'3'来清除它们，所以它会低于'1'。 希望这有帮助！

@media screen and (max-width: 3550px) {
 .second {float: right;}
 .third {clear: both;}

}

只需将最大宽度编辑为您希望断点发生的位置。