将div宽度适合内嵌块儿童 [英] Fit div width to inline-block children

问题描述

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

＃a-container {width：250px; background-color：gray;}。a {background-color：blue;宽度：100像素; height：100px; display：inline-block;}

< div id = 一个容器> < div class =a>< / div> < div class =a>< / div> < div class =a>< / div>< / div>

解决方案

下面是使用 display：table 和浮动的小提琴： http://jsfiddle.net/vqjnoqur/ 。

HTML：

＃a-container {display：table; background-color：gray;}。a {background-color：blue;宽度：100像素; height：100px; margin：5px; float：left;}。a：nth-​​type-type（2n + 1）{clear：left;}

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

I want the container div (#a-container in this example) to fit the width of its children, that are inline-block divs. In this example, I want the #a-container div to be just the size of 2 .a div. Is it possible? (pure CSS please)

#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>

解决方案

Here's a fiddle that uses display: table and floating: http://jsfiddle.net/vqjnoqur/.

HTML:

#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;
}

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

这篇关于将div宽度适合内嵌块儿童的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！