html - CSS:如何将容器缩放到动态大小的 child 的宽度？

Question

我正在尝试创建一个包含多个自适应容器的页面，其中将包含多个静态大小的元素以及一个具有动态宽度和高度的可选元素。

CSS 中的缩放比例有点粗略，因为我从一张较大的纸中取出它，但我希望它能说明我的目的。

所以，我无法开始工作的是:我非常希望动态容器采用其中动态元素的宽度。

容器应该是动态元素的宽度，里面的静态尺寸元素应该在容器的宽度内自行排序，根据需要扩展高度。

我还应该指出，我希望能有纯 CSS 解决方案。我没有部署它的选项。

---

编辑:我似乎造成了一些困惑，所以我会澄清一下。 静态容器正是我想要的。它正确包装，一切都很好。包含动态(蓝色)元素的容器是我遇到的麻烦。我希望带有蓝色元素的容器采用蓝色元素的宽度。如果需要，红色项应包裹并扩展动态容器的高度。

我无法更改 HTML 布局。如果需要，我可以向 HTML 添加额外的类。

我对结果的外观进行了更新。但我需要它是动态的。所以我不能只设置容器的宽度，我就是这样做的:https://jsfiddle.net/mnybon/nwa0gx1h/1/

---

我这里有一个 js-fiddle 以及用于归档的初始修订代码 https://jsfiddle.net/mnybon/nwa0gx1h/

.site {
  height: 100vh;
  width: 100vw;
  background-color: rgb(40, 40, 40);
  overflow-x: hidden;
  overflow-y: auto;
}

.container {
  min-width: 30vw;
  max-width: 100%;  
  background-color: green;
  box-sizing: border-box;
  padding: 1vh 1vw;
  text-align: center;
  display: inline-block;
}

.container.fixed{
  width: 30vw;
}

.fixedsize-element {
  background-color: red;
  width: 50px;
  height: 50px;
  display: inline-block;
  margin: 2px;
}

.variable-element {
  width: 44vw;
  height: 20vh;
  background-color: blue;
  margin: auto;
}

<div class="site">
  <div class="container dynamic">
    <div class="fixedsize-element">

    </div>
    <div class="fixedsize-element">

    </div>
    <div class="fixedsize-element">

    </div>
    <div class="fixedsize-element">

    </div>
    <div class="fixedsize-element">

    </div>
    <div class="fixedsize-element">

    </div>

    <div class="fixedsize-element">

    </div>

    <div class="fixedsize-element">

    </div>

    <div class="fixedsize-element">

    </div>
    <div class="variable-element">

    </div>
    <div class="fixedsize-element">

    </div>

    <div class="fixedsize-element">

    </div>

    <div class="fixedsize-element">

    </div>

    <div class="fixedsize-element">

    </div>

  </div>

  <div class="container fixed">
    <div class="fixedsize-element">

    </div>
    <div class="fixedsize-element">

    </div>
    <div class="fixedsize-element">

    </div>
    <div class="fixedsize-element">

    </div>
    <div class="fixedsize-element">

    </div>
    <div class="fixedsize-element">

    </div>

    <div class="fixedsize-element">

    </div>

    <div class="fixedsize-element">

    </div>

    <div class="fixedsize-element">

    </div>
  </div>
</div>

Answer 1

如果你想要 2 个容器垂直对齐并且它应该占据可变大小的子元素宽度试试这个

display:table-caption ->These elements behave like HTML elements. but it causes vertical layout.

添加这个 CSS

.container.dynamic{ display: table-caption; } 

Fiddle Link