CSS：我如何将容器扩展到动态大小的孩子的宽度？

我正在尝试创建一个包含多个自适应容器的页面，这些容器将包含一些静态大小的元素以及一个具有动态宽度和高度的可选元素。CSS：我如何将容器扩展到动态大小的孩子的宽度？

在CSS中缩放比较粗糙，因为我把它从一个更大的工作表中解放出来，但我希望它能显示出我要做什么。

所以，我不能去工作是这样的：我非常喜欢动态容器取其中的动态元素的宽度。容器应该是动态元素的宽度，并且里面的静态大小的元素应该在容器宽度内排序，根据需要扩展高度。

我还应该指出，我将不胜感激纯粹的CSS解决方案。我没有这个选项来部署这个选项。

编辑：我似乎造成了一点困惑，所以我会澄清。静态容器就像我想要的那样。它包装正确，一切都很好。包含动态（蓝色）元素的容器是我遇到的问题之一。我想要蓝色物品的容器取得蓝色物品的宽度。如果需要，红色项目应该包装和扩展动态容器的高度。

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

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

我有一个JS-小提琴这里以及用于归档 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>

来源

2017-04-19 Martin Nielsen

你可以添加周围固定大小元素或不是包装？ –

不:)我不能更改HTML的结构，但我可以添加其他类。我会更新这个问题，因为我看到我在这里引起了一些混乱。 –

您可以试试这个 .container.dynamic display：table-caption; } –

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

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

.dynamicsize-element { 
    flex: 100%; 
}

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

来源

2017-04-19 06:41:53

我想我可能不清楚我的问题。我试图更新它以使其更有意义。我想要蓝色元素的容器是蓝色元素的宽度。如果需要，红色元素应该包裹并延伸容器的高度。没有蓝色元素的容器应保持不变。 –

@Martin尼尔森你能解释你想要的图像 –

https://jsfiddle.net/mnybon/nwa0gx1h/1/我更新了小提琴来模拟我想要的：容器保持蓝色元素的大小。但我需要一个动态的解决方案，因为蓝色容器可以改变它的宽度。 –

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

显示：表 - caption - >这些元素的行为与HTML元素相似。但它会导致垂直布局。

添加这个CSS

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

Fiddle Link

来源

2017-04-19 08:09:04

CSS：我如何将容器扩展到动态大小的孩子的宽度？

回答

相关问题