Html 如何基于子项自动展开父项'；内容_Html_Css

Html 如何基于子项自动展开父项'；内容

html css

Html 如何基于子项自动展开父项'；内容,html,css,Html,Css,我有一个父div，在其中我需要浮动两个子div元素。第一个是固定宽度的，第二个是各种各样的旋转木马，包含数量不可预测的元素。我想要的是，旋转木马应该随着越来越多的子元素的出现而自动扩展，并且按比例，父元素也应该扩展，但只能扩展到一定程度（主体宽度的90%）。除此之外，父元素应该保持固定的宽度，第二个子元素也应该保持固定的宽度，第二个子元素内部的元素可以水平滚动我的HTML是这样的： .parent{ 最大宽度：90%；宽度：适合的内容；利润率：10px自动；背景：黄色；高度：100p

我有一个父

div

，在其中我需要浮动两个子

div

元素。第一个是固定宽度的，第二个是各种各样的旋转木马，包含数量不可预测的元素。我想要的是，旋转木马应该随着越来越多的子元素的出现而自动扩展，并且按比例，父元素也应该扩展，但只能扩展到一定程度（主体宽度的90%）。除此之外，父元素应该保持固定的宽度，第二个子元素也应该保持固定的宽度，第二个子元素内部的元素可以水平滚动

我的HTML是这样的：

.parent{
最大宽度：90%；
宽度：适合的内容；
利润率：10px自动；
背景：黄色；
高度：100px；
显示：内联块；
}
.儿童1，
.儿童2{
浮动：左；
}
.儿童2{
高度：60px；
背景：绿色；
宽度：计算（100%-30px）；
左边距：10px；
溢出-x：自动；
}
.儿童3{
宽度：80px；
高度：60px；
浮动：左；
右边距：10px；
背景：粉红色；
}
.清楚{
宽度：100%；
身高：0；
明确：两者皆有；
}

福

您可以使用

空白

属性，但前提是不使用

浮动

s。将所有内容改为内联块

calc

函数中还有一个错误：

符号后面应该跟一个空格，否则它会被解析为两个值100%和-30px，中间没有运算符

.parent{
最大宽度：90vw；
利润率：10px自动；
背景：黄色；
高度：100px；
显示：内联块；
空白：nowrap；
}
.儿童1，
.儿童2{
显示：内联块；
空白：nowrap；
垂直对齐：顶部；
}
.儿童2{
高度：60px；
背景：绿色；
宽度：计算（100%-30px）；
左边距：10px；
溢出-x：自动；
}
.儿童3{
宽度：80px；
高度：60px；
显示：内联块；
右边距：10px；
背景：粉红色；
}
.清楚{
宽度：100%；
身高：0；
明确：两者皆有；
}

福

您可以使用

空白

属性，但前提是不使用

浮动

s。将所有内容改为内联块

calc

函数中还有一个错误：

符号后面应该跟一个空格，否则它会被解析为两个值100%和-30px，中间没有运算符

.parent{
最大宽度：90vw；
利润率：10px自动；
背景：黄色；
高度：100px；
显示：内联块；
空白：nowrap；
}
.儿童1，
.儿童2{
显示：内联块；
空白：nowrap；
垂直对齐：顶部；
}
.儿童2{
高度：60px；
背景：绿色；
宽度：计算（100%-30px）；
左边距：10px；
溢出-x：自动；
}
.儿童3{
宽度：80px；
高度：60px；
显示：内联块；
右边距：10px；
背景：粉红色；
}
.清楚{
宽度：100%；
身高：0；
明确：两者皆有；
}

福

我想我找到了如何制作所需的水平滚动条。在

.Child2

上，这些风格似乎产生了最大的不同<代码>最大宽度：90%

溢出：自动溢出-x：滚动空白：nowrap
<div class="parent">
    <div class="child1">
        <p>Foo</p>
    </div>
    <div class="child2">
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
    </div>
    <div class="clear"></div>
</div>

.parent {
    position: relative;
    max-width: 90%;
    width: auto;
    margin: 10px auto;
    background: #ebe573;
    border: 1px solid #fffa0c;
    height: 100px;

}
.child1, .child2 {
    float: left;
}
.child2 {
    height: 80px;
    background: green;
    width: calc(100%-30px);
    margin: 8px;
    position: relative;
    max-width: 90%;
    overflow: auto;
    overflow-x: scroll;
    white-space: nowrap;
}
.child3 {
    width: 80px;
    height: 40px;
    display: inline-block;
    margin: 0 10px;
    margin-top: 10px;
    background: #00ff15;
}


福
.家长{
位置：相对位置；
最大宽度：90%；
宽度：自动；
利润率：10px自动；
背景：#ebe573；
边框：1px实心#fffa0c；
高度：100px；
}
.child1.child2{
浮动：左；
}
.儿童2{
高度：80px；
背景：绿色；
宽度：计算（100%-30px）；
利润率：8px；
位置：相对位置；
最大宽度：90%；
溢出：自动；
溢出-x：滚动；
空白：nowrap；
}
.儿童3{
宽度：80px；
高度：40px；
显示：内联块；
利润率：0.10px；
边缘顶部：10px；
背景：#00ff15；
}
我想我找到了如何制作所需的水平滚动条。在.Child2
上，这些风格似乎产生了最大的不同<代码>最大宽度：90%溢出：自动溢出-x：滚动空白：nowrap
<div class="parent">
    <div class="child1">
        <p>Foo</p>
    </div>
    <div class="child2">
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
    </div>
    <div class="clear"></div>
</div>

.parent {
    position: relative;
    max-width: 90%;
    width: auto;
    margin: 10px auto;
    background: #ebe573;
    border: 1px solid #fffa0c;
    height: 100px;

}
.child1, .child2 {
    float: left;
}
.child2 {
    height: 80px;
    background: green;
    width: calc(100%-30px);
    margin: 8px;
    position: relative;
    max-width: 90%;
    overflow: auto;
    overflow-x: scroll;
    white-space: nowrap;
}
.child3 {
    width: 80px;
    height: 40px;
    display: inline-block;
    margin: 0 10px;
    margin-top: 10px;
    background: #00ff15;
}


福
.家长{
位置：相对位置；
最大宽度：90%；
宽度：自动；
利润率：10px自动；
背景：#ebe573；
边框：1px实心#fffa0c；
高度：100px；
}
.child1.child2{
浮动：左；
}
.儿童2{
高度：80px；
背景：绿色；
宽度：计算（100%-30px）；
利润率：8px；
位置：相对位置；
最大宽度：90%；
溢出：自动；
溢出-x：滚动；
空白：nowrap；
}
.儿童3{
宽度：80px；
高度：40px；
显示：内联块；
利润率：0.10px；
边缘顶部：10px；
背景：#00ff15；
}
这看起来很有希望。但是，出现了一个恼人的小垂直滚动条，让我稍微滚动一下。这是因为.child2的高度包括了水平滚动条的高度。因此，如果有一个滚动条，有效高度会下降到40px而不是60。没有CSS解决方案，因为CSS无法检测滚动条是否存在。使用JavaScript实现这一点。仅使用CSS，您所能做的就是将.child2的高度变大。有一个名为的属性提案将解决该问题，但这不是一个解决方案，抱歉。是的，同意。增加高度确实解决了这个问题