Question

请在此处查看图片：http://s18.postimg.org/9tfej2sdl/duvida_stack.png

我有一个问题，盒子在另一个上面。当其中一个盒子的内容较大时，一个在另一个盒子上。

CSS：

    #destaques_container{
    margin: 0 auto;
}

#destaques_container_dentro{
    float: left;
    margin-left: 25px;
    margin-bottom: 35px;
    display: inline;
    min-height: 190px; 
    font-family: 'Signika', Arial, Verdana;
    font-size:16px;
}
.box_shadow_preview{ 
    position: absolute;
    display: inline-block;
    min-height: 190px; 
    background-color: #FFFFFF; 
    border-width: 1px; 
    border-style: solid; 
    border-color: #DDDDDD; 
    border-radius: 0px; 
-webkit-box-shadow: 2px 2px 16px 0px rgba(52, 84, 109, 0.65);
-moz-box-shadow:    2px 2px 16px 0px rgba(52, 84, 109, 0.65);
box-shadow:         2px 2px 16px 0px rgba(52, 84, 109, 0.65);
-webkit-border-radius: 99px 20px 0px 20px;-moz-border-radius: 99px 20px 0px 20px;border-radius: 99px 20px 0px 20px;
} 
#destaques_line{
    width: 100%;
    display: block;
    clear: both;
}

@media screen and (max-width: 1024px) {
    #destaques_container{
        width: 1002px;
    }
#destaques_container_dentro{
    width: 46%;
    font-size:16px;
}

.box_shadow_preview{ 
    width: 46%;
} 

}

DIV HTML：

<div id="destaques_container_dentro">
    <div class="box_shadow_preview">
        <div id="destaques_line">
            <br /><br /><br /><br /><br /><br /><br /><br /><br />
        </div>
    </div> 
</div>
<div id="destaques_container_dentro">
    <div class="box_shadow_preview">
        <div id="destaques_line">
            <br /><br /><br /><br /><br />
        </div>
    </div> 
</div>
<div id="destaques_container_dentro">
    <div class="box_shadow_preview">
        <div id="destaques_line">
            <br /><br /><br /><br /><br />
        </div>
    </div> 
</div>
<div id="destaques_container_dentro">
    <div class="box_shadow_preview">
        <div id="destaques_line">
            <br /><br /><br /><br /><br />
        </div>
    </div> 
</div>

请帮助我提供资源使用的任何提示，以便当一个盒子具有最高内容时，随着盒子的最大高度为190px，下面变得更加遥远。

Answer 1

从position: absolute; display: inline-block;移除.box_shadow_preview{。

同时删除.box_shadow_preview{ width: 46%; }。

重叠问题将得到解决，但对齐将会中断。使用相同高度的脚本来制作相同高度的块。

Answer 2

通常情况下，让浏览器决定事物的位置会更容易，但是当浏览器窗口空间中浮动的东西时，您可能需要做出一些绝对定义来帮助它计算最佳布局。

从您的CSS看起来，您似乎正在尝试响应窗口大小，因此定义对象的高度和宽度将会有所帮助。

您可以混合使用浮动项目，绝对定位和不同的显示类型，以及具有相同ID的多个项目。这可能会导致浏览器出现不可预测的行为。

在下面的代码中，我已将id更改为类并删除了显示和位置语句。然后我让所有的盒子都有相同的高度和宽度，并使它们可以滚动。

<强> HTML：

<!DOCTYPE html>
<HTML>
<HEAD>
<link href='testing.css' rel="stylesheet" type='text/css'>
</head>
<body>
<div id="destaques_container">
<div class="destaques_container_dentro">
    <div class="box_shadow_preview">
        <!--Adding div to use as header. Inline styling just to make it more obvious -->
        <div style="width:100%;height:99px;text-align:center;background-color:#ff0;opacity:0.3;">box header</div>
        <!--This div has a unique id.  It has different css. -->
        <div id="destaques_line_1">
             box 1<br /><br /><br />scrollable div with a div above for a header<br />yellow background added to highlight it<br /><br /><br /><br /><br />
        </div>
    </div> 
</div>
<div class="destaques_container_dentro">
    <div class="box_shadow_preview">
        <div class="destaques_line">
             box 2<br />      <br />       <br />  <br />      <br />
        </div>
    </div> 
</div>
<div class="destaques_container_dentro">
    <div class="box_shadow_preview">
        <div class="destaques_line">
             box 3<br /><br /><br /><br />scrollable div with left padding<br /><br /><br /><br /><br /><br />box 3<br /><br /><br /><br /><br /><br />box 3<br />
        </div>
    </div> 
</div>
<div class="destaques_container_dentro">
    <div class="box_shadow_preview">
        <div class="destaques_line">
             box 4<br /><br /><br />     <br /><br />
        </div>
    </div> 
</div>
</div>
</body>

<强> CSS：

#destaques_container{
    margin: 0 auto;
    width: 100%;
    height: 100%;
}
.destaques_container_dentro{
    float: left;
    margin-left: 25px;
    margin-bottom: 35px;
    /*display: inline;*/
    min-height: 190px; 
    font-family: 'Signika', Arial, Verdana;
    font-size:16px;
    width: 46%;
}
.box_shadow_preview{ 
    /*position: absolute;
    display: block;*/
  width:100%;
    min-height: 190px; 
    background-color: #FFFFFF; 
    border-width: 1px; 
    border-style: solid; 
    border-color: #DDDDDD; 
    border-radius: 0px; 
-webkit-box-shadow: 2px 2px 16px 0px rgba(52, 84, 109, 0.65);
-moz-box-shadow:    2px 2px 16px 0px rgba(52, 84, 109, 0.65);
box-shadow:         2px 2px 16px 0px rgba(52, 84, 109, 0.65);
-webkit-border-radius: 99px 20px 0px 20px;-moz-border-radius: 99px 20px 0px 20px;border-radius: 99px 20px 0px 20px;
}

.destaques_line{
    width: 100%;
    height: 190px;
    padding-left:99px;
    overflow-y: scroll;
    /*display: block;
    clear: both;*/
}enter code here

以下是结果：

Screen shot of html/css result

鉴于每个方框左上角都有一个大而美丽的圆角，滚动文字最终会显示在边框外面，所以我添加了几个选项：

在可滚动内容上方添加div。将其用作标题或显示应始终可见的内容。
使用左边填充物将内容物从圆角处推开。

当其中一个盒子有更大的内容时，一个在另一个上面

2 个答案: