我正在尝试创建一个页面,其中包含多个自适应容器,这些容器将包含几个静态大小的元素以及一个可选的具有动态宽度和高度的元素。
CSS中的缩放有点粗糙,因为我从较大的样式表中删除了它,但我希望它能显示出我的意图。
所以,我无法让它起作用的是:我非常希望动态容器可以采用其中的动态元素的宽度。
容器应该是动态元素的宽度,容器内的静态大小元素应在容器的宽度内排序,根据需要扩展高度。
我还应指出,我希望使用纯CSS解决方案。在此部署时,我没有这个选项。
CSS中的缩放有点粗糙,因为我从较大的样式表中删除了它,但我希望它能显示出我的意图。
所以,我无法让它起作用的是:我非常希望动态容器可以采用其中的动态元素的宽度。
容器应该是动态元素的宽度,容器内的静态大小元素应在容器的宽度内排序,根据需要扩展高度。
我还应指出,我希望使用纯CSS解决方案。在此部署时,我没有这个选项。
编辑:我似乎引起了一些混乱,因此我将澄清。 静态容器正是我想要的。它正确地包裹着一切,一切都很好。我有问题的是包含动态(蓝色)元素的容器。我希望蓝色项目的容器采用蓝色项目的宽度。如果需要,红色项目应该包裹并扩展动态容器的高度。
我无法更改HTML布局。如有需要,我可以向HTML添加额外的类。
我使用更新的fiddle演示了我想要的结果。但我需要它是动态的。因此,我不能仅设置容器的宽度,这就是我制作这个的方式: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>