如何自动调整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

执行此操作的一种方法是使用:after类

上的col2

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