如何在css中自動調整父框的大小？

Question

如何使“cols_img”框位於下面代碼中的“col2”框內？ 我知道如果我增加“col2”的填充它會起作用，但是有沒有辦法自動做到這一點？

 html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } .col2 { border: 2px solid black; padding: 5px; } .cols_img { width: 50%; float: left; padding: 10px 10px 5px 5px; background-color: yellow; border: 1px solid blue; }

 <div class=col2> <div class="cols_img"></div> <div class="cols_img"></div> </div>

Answer 1

一種方法是在col2類上使用:after

.col2:after {
    content: '';
    display: block;
    clear: both;
}

Answer 2

您可以使用 display: inline-block 而不是 float。

.cols_img {
  display: inline-block;
  width: 40%;
  padding: 10px 10px 5px 5px;
  background-color: yellow;
  border: 1px solid blue;
}

在這里查看： http : //jsfiddle.net/97gq048L/