将div宽度拟合到内联块子节点（每行div的未知数）

Question

我希望容器div（在此示例中为#a）适合其子项的width，即inline-block div。

每行div的数量未知，因为它取决于屏幕的大小。

在这个例子中，我想要的是#a容器右侧没有额外的灰色空间。

有可能吗？ （纯CSS请）

＆＃13;

＆＃13;

#a {
    background-color: gray;
}

.b {
    width: 110px;
    height: 110px;    
    display: inline-block;
    background-color: blue;
}

＆＃13;

<div id="a">
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

由于似乎没有纯CSS方法，所以这里有一些快速的JavaScript来完成工作。

1. 暂时将父级的display样式更改为inline，以便缩小以适应其内容。
2. 使用 getBoundingClientRect() 将父级宽度设置为缩小到适合的宽度。
3. 清除父级的默认display样式。

<强>段

var a = document.getElementById('a');
a.style.display = 'inline';
a.style.width = a.getBoundingClientRect().width + 'px';
a.style.display = '';

#a {
  background-color: gray;
}
.b {
  width: 110px;
  height: 110px;
  display: inline-block;
  background-color: blue;
}

<div id="a">
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
</div>

Answer 2

我们可以使用表或内联块的属性来根据需要调整其宽度。但是当你有超过1行的方框时，它并没有完全解决问题

所以只需将display:table;添加到#a

即可

<style>
#a {
    background-color: gray;
    display:table;
}

.b {
    width: 110px;
    height: 110px;    
    display: inline-block;
    background-color: blue;
}
</style>
<div id="a">
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
</div>

Answer 3

嗯，一个解决方案是使用media queries：

#a {
    background-color: gray;
    display: block;
    width: 110px;
}

.b {
    width: 110px;
    height: 110px;    
    display: inline-block;
    background-color: blue;
}

@media (min-width: 220px){
    #a {
        width: 220px;
    }
}

@media (min-width: 330px){
    #a {
        width: 330px;
    }
}

@media (min-width: 440px){
    #a {
        width: 440px;
    }
}

@media (min-width: 550px){
    #a {
        width: 550px;
    }
}

@media (min-width: 660px){
    #a {
        width: 660px;
    }
}

<div id="a">
    <div class="b"></div><!--
    --><div class="b"></div><!--
    --><div class="b"></div><!--
    --><div class="b"></div><!--
    --><div class="b"></div><!--
    --><div class="b"></div>
</div>

JSFiddle

Answer 4

我没有太多的评论声明。所以在这里添加我的建议。这在Firefox中受支持。对于其他浏览器，我们必须检查。

＆＃13;

＆＃13;

#a {
    background-color: gray;
    display: -moz-inline-box;
}


#a:after, #a:before {
    display: table;
    content: "";
}
#a:after{
    clear: both;
}

.b {
    width: 110px;
    height: 110px;    
    float: left;
    background-color: blue;
    border: 2px solid #888;
}

＆＃13;

<div id="a">
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

click here for display: -moz-inline-box demo

click here for display: -moz-inline-box

Answer 5

看到这是一个小小的解决方案。但它可能对你有帮助。

public override bool OnOptionsItemSelected(IMenuItem item)
        {
            switch(item.ItemId)
            {
                case Android.Resource.Id.Home:
                    SupportFragmentManager.PopBackStackImmediate();
                    break;
            }
            return base.OnOptionsItemSelected(item);
        }

.b {
  width: 110px;
  height: 110px;
  display: inline-block;
  background-color: blue;
    border: 8px solid gray;
    float: left;
  
}

Answer 6

看看这个：

将屏幕划分为10个部分：width: 10vw。它意味着视图宽度的10％。

body, html{
  padding: 0;
  margin: 0;
}

#cont {
  width: 100%;
  text-align: left;
  overflow: hidden;
  background: black;
}

#cont .cell {
  width: 10vw;
  height: 10vw;
  background: red;
  float: left;
  
  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 1);
}

<div id="cont">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
</div>

Answer 7

不确定这是否是您正在寻找的，我不相信任何事情＆lt; ie9支持它，但你可以使用flexbox模型。

＆＃13;

＆＃13;

#a {
    background-color: gray;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.b {
    width: 110px;
    height: 110px;    
    display: inline-block;
    background-color: blue;
    border: 1px solid #fff;
}

＆＃13;

<div id="a">
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 8

如果内部元素的数量完全取决于屏幕的宽度（暗示您的代码在某处产生了基于该宽度的元素数量），那么这可能就是您正在寻找的内容。但是，我不会推荐这一代作为一种方法，因为你的外部div变成完全一个容器，并且失去了你可能希望的任何响应能力。但如果你需要一个容器，那么这肯定会有效。请注意，容器div的宽度必须小于最小元素的宽度，否则将占用尽可能宽的宽度。

＆＃13;

＆＃13;

  #a {
    background-color: gray;
    display: flex;
    width:50px;
}

.b {
    min-width: 110px;
    height: 110px;    
    display: inline-block;
    background-color: blue;
}
.c {
    min-width: 110px;
    height: 110px;    
    display: inline-block;
    background-color: red;
}

＆＃13;

   <div id="a">
    <div class="b">sample Text</div>
    <div class="c">sample Text</div>
    <div class="b">sample Text</div>
    <div class="c">sample Text</div>
    <div class="b">sample Text</div>
    <div class="c">sample Text</div>
    <div class="b">sample Text</div>
    <div class="c">sample Text</div>
    <div class="b">sample Text</div>
</div>

＆＃13;

＆＃13;

＆＃13;