适合外部div与其内容

Question

在下面的示例中，如何使outer div符合框的宽度？我发现的所有解决方案都说外部div必须有display: inline-block，但如果子元素也是inline-block，那似乎不起作用。还有其他解决方案：

https://jsfiddle.net/45fexke7/

简而言之，outer div应位于wrapper内，并具有内部内容的宽度。

编辑：

这必须要有回应！ wrapper在示例中有一个固定的宽度，但我们说它是width: 100%。它应该在一行中显示尽可能多的盒子，但是盒子必须居中的剩余空间。

Answer 1

您可以将外部类的显示属性设置为Azure IoT protocol gateway。 这些额外的属性。

flex

 #outer {
  display: flex;
  justify-content:center;
  text-align: left;
  background-color: black;
  width:100%;
  flex-wrap:wrap;
}

Answer 2

你在找这样的东西吗？

#wrapper {
  width: 800px;
  background-color: red;
  text-align: center;
  margin: 0 auto;
}
#outer {
  /*   display: inline-block; */
  text-align: left;
  background-color: black;
  width: 100%;
}
.inner {
  width: 33%;
  height: 200px;
  /*   margin: 5px; */
  background-color: green;
  display: inline-block;
}

<div id="wrapper">

  <div id="outer">
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
  </div>

</div>

Answer 3

我认为你可以这样做，但你需要脚本来帮助渲染外部的宽度。请注意，您的内部包含边距，因此您也需要在脚本中处理它。

＆＃13;

＆＃13;

$(function ($) {
  var longestWidth = 0;
  var sumwidth = 0;
  $("#outer").children().each(function() {
        var child = $(this);
    if(sumwidth + child.width()+10<800)
        sumwidth+=child.width()+10;
    else 
    {
      if(longestWidth<sumwidth)
      longestWidth = sumwidth+10;
      console.log(longestWidth);
      sumwidth = 0;
    }
      
    });
    $("#outer").width(longestWidth);
});

＆＃13;

#wrapper {
  width: 800px;
  background-color: red;
  text-align:center;
}

#outer {
 
  background-color: black;
  display: inline-block;
}

.inner {
  width: 220px;
  height: 200px;
  margin: 5px;
  background-color: green;
 display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="outer">
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

这应该符合您的期望。

将内部div宽度更改为百分比并更改边距。

  .inner {
   margin-left: 6px;
    margin-top: 5px;
    width: 32%;
    height: 200px;
    background-color: green;
    display: inline-block;
}

#wrapper {
  width: 800px;
  background-color: red;
  text-align: center;
}

#outer {
  width: 100%;
  display: inline-block;
  text-align: left;
  background-color: black;
}

.inner {
   margin-left: 6px;
    margin-top: 5px;
    width: 32%;
    height: 200px;
    background-color: green;
    display: inline-block;
}

<div id="wrapper">

  <div id="outer">
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
  </div>

</div>