Question

我希望容器div（在这个例子中是#a-container）适合其子节点的宽度，即内联块div。在这个例子中，我希望#a-container div只是2 .a div的大小。可能吗？（纯CSS请）

#a-container {
  width: 250px;
  background-color: gray;
}
.a {
  background-color:blue;
  width:100px;
  height: 100px;
  display:inline-block;
}

<div id="a-container">
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
</div>

Answer 1

这是一个使用display: table并浮动的小提琴：http://jsfiddle.net/vqjnoqur/。

HTML：

＆＃13;

#a-container {
  display: table;
  background-color: gray;
}

.a {
  background-color:blue;
  width:100px;
  height: 100px;
  margin: 5px;
  float: left;
}

.a:nth-of-type(2n + 1) {
    clear: left;
}

＆＃13;

<div id="a-container">
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
</div>

＆＃13;

将div宽度调整为内联块子

1 个答案: