Question

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

css中的缩放比较粗略，因为我把它从更大的纸张中剔除，但我希望它能显示出我想要的东西。

所以，我无法工作的是：我非常希望动态容器获取其中动态元素的宽度。容器应该是动态元素的宽度，内部静态大小的元素应该在容器的宽度内排序，根据需要扩展高度。

我还应该指出，我会欣赏纯CSS解决方案。我没有这个部署的选项。

编辑：我似乎引起了一些混乱，所以我会澄清。静态容器正是我想要的。它包裹正确，一切都很好。包含动态（蓝色）元素的容器是我遇到问题的容器。我希望带有蓝色项目的容器取蓝色项目的宽度。如果需要，红色项目应该包裹并扩展动态容器的高度。

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

我做了一个更新的小提琴，我希望结果看起来如何。但我需要它是动态的。所以我不能只设置容器的宽度，这就是我如何做到这一点：https://jsfiddle.net/mnybon/nwa0gx1h/1/

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

CSS

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

HTML

<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

我看到你正在寻找flexible boxes css。例如：

.container {
    display: flex;
    flex-wrap: wrap;
}

.dynamicsize-element {
    flex: 100%;
}

看看我的jsfiddle：https://jsfiddle.net/rpje8Lyb/1/

Answer 2

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

display：table-caption - ＆gt;这些元素的行为与HTML元素类似。但它会导致垂直布局。

添加此CSS

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

Fiddle Link

CSS：如何将容器缩放到动态大小的子项的宽度？

2 个答案: