0

我对父 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 解决方案。

谢谢

4

2 回答 2

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>
于 2013-02-04T20:46:17.163 回答
1

您可以通过使用媒体查询来实现您想要的。这是使用您提供的标记的示例：http: //jsfiddle.net/VQMrY/1/

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

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

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

}

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

于 2013-02-04T20:55:56.080 回答