html - 自动调整包含的 div

Question

我正在尝试根据将要放入其中的内容来设置可自动调整大小的 div。该代码有点乱，但我想知道是否有人可以为我提供一些使其正常工作的建议。

CSS:

.container { min-width:748px; margin-left:180px; margin-right:3px; border: 1px solid #210B61; border-top:none; }
.first_div { width:233px; background:#A9BCF5; border: 1px solid #210B61; float:left; overflow:auto; }
.second_div { background:#E0ECF8; overflow:hidden; }
.label_for_first_div { width:100px; text-align:left margin-left:5px; }

HTML:

<div class="container">
    <div class="first_div">
        <div class="label_for_first_div">

        </div>
    </div>
    <div class="second_div">

    </div>
</div>

问题是如果不使用 label_for_first_div，first_div 将不会显示在容器内。让第一个 div 适合该容器的高度也很麻烦。会使用 display:table;是我最好的选择吗？

Answer 1

你可以使用 calc() 来完成这个

.container { 
   min-width:748px; 
   margin-right:3px; 
   border: 1px solid #210B61; 
   border-top:none; 
   overflow: hidden;
}

.first_div { 
   width:233px; 
   background:#A9BCF5; 
   float:left; 
}

.second_div {
   width: calc(100% - 233px);
   background:red; 
   float: left;
}

EXAMPLE 1

或

您可以通过将 div 设置为 display: table-cell 并将父级设置为 display: table

.container { 
    display: table;
    min-width:748px; 
    margin-right:3px; 
    border: 1px solid #210B61; 
    border-top:none; 
}
.first_div { 
    display: table-cell;
    width:233px; 
    background:#A9BCF5; 
}

.second_div {
    display: table-cell;
    background:red; 
}

EXAMPLE 2