Html 左浮动divs问题

我有两个关于父分区中左侧浮动分区的问题。我花了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.
2.
3.

问题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解决方案

---

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

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

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

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

<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>

这是标题组
1.
2.
3.

通过使用媒体查询，您可以实现自己的目标。下面是一个使用您提供的标记的示例：

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

在媒体查询中，我将div“2”设置为向右浮动，这样就不会有这个间隙，然后将“3”设置为清除这两个间隙，这样它就会降到“1”以下。希望这有帮助

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

}

---

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

谢谢，这非常有效。但是，对于数量可变的“左浮动”div，有没有办法做到这一点呢？i、 例如，我应该为每个div定义@media css标记吗？当然，您可以使用：last child来获取最后一个，这将获得clear:both属性和：nth last child（2）来获取要浮动的倒数第二个元素：right谢谢，这很好地解决了第一个问题。是否需要根据内容的宽度而不是固定的数字“n px”来定义它？关于第二个问题，问题是div的高度是可变的，我现在没有任何先验限制！