Question

我现在尝试做的是创建一个容器（带浮动元素），使其宽度适应适合的元素。

我能想到的最简单的例子是：一个容器装满300px * 300px浮动div。只要div不填满一行，容器的宽度（两者都清除）与div的组合宽度相同，或者1 div = 300px，2 divs = 600px，依此类推。但是，如果div不适合一行，它们会继续到下一行，容器的宽度保持在100％，即使第一行的div只占用（让我们说） 95％。

是否有纯CSS方式使该容器不比其内容宽？

#main {
  float: left;
  background-color: #f00;
}

#main > :last-child:after {
  clear: both;
}

.float {
  width: 150px;
  height: 150px;
  float: left;
  background-color: #00f;
}

<div id="main">
  <div class="float"></div>
  <div class="float"></div>
  <div class="float"></div>
  <div class="float"></div>
  <div class="float"></div>
  <div class="float"></div>
  <div class="float"></div>
  <div class="float"></div>
  <div class="float"></div>
</div>

这是一个JSfiddle：http://jsfiddle.net/j9A6T/ 你能不能把红色部分丢到右边？

我尝试在容器上使用float / inline-block / table解决方案，但在这种情况下他们不会工作。

Answer 1

是不是一个clearfix（适用于你的容器div）有帮助的情况？

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

更多信息：What is a clearfix?

使用CSS，设置容器宽度以覆盖浮动元素

1 个答案: