Html 宽度：自动获取父元素的大小_Html_Css

Html 宽度：自动获取父元素的大小

html css

Html 宽度：自动获取父元素的大小,html,css,Html,Css,你好！我做了一些研究，我在这里读到了根据孩子们的宽度，高度自动控制应该占用最小的空间在我的例子中，该属性的行为类似于width 100%，占父属性宽度的100% 代码如下： <!DOCTYPE html> <html> <head> <style> .header2 { float:left; width:900px; height:23px;

你好！我做了一些研究，我在这里读到了

根据孩子们的宽度，高度自动控制应该占用最小的空间

在我的例子中，该属性的行为类似于

width 100%

，占父属性宽度的100%

代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
 .header2 {
            float:left; 
            width:900px;
            height:23px;
            background:red;
        }
.buttonHolder {
    margin: 0 auto;
    width:auto;  
    height:24px;
    background:black;
}

.button {
     width:50px;
    height:24px;
     background:blue;
     float:left;
}
</style>
</head>
    <body>
      <div class="header2">
                <div class="buttonHolder">
                    <div class="button"></div> <div class="button"></div> <div class="button"></div>
                </div>
            </div>
    </body>


.校长2{
浮动：左；
宽度：900px；
高度：23px；
背景：红色；
}
巴顿霍尔德先生{
保证金：0自动；
宽度：自动；
高度：24px；
背景：黑色；
}
.按钮{
宽度：50px；
高度：24px；
背景：蓝色；
浮动：左；
}

问题是：我的错误在哪里

.header2 {
            float:left; 
            width:900px;
            height:23px;
            background:red;
            text-align: center;
        }
.buttonHolder {
     display: inline-block;


    height:24px;
    background:black;
}

这应该有效。

宽度：100%将占据其容器的整个宽度。在你的例子中，它是带有类头2的div。是的，但是我正在试图弄清楚为什么“ButoHOND”要占据整个“Heale2”。你能清楚地知道你想要“ButoHOND”div吗？我想把它放在“Heale2”的中间，宽度等于它的孩子的总和。第一部分是实施和工作精细化。宽度部分无效。它可以工作，但它会打破“边距：0自动；”我使用它将div居中，因此它修复了这个问题，但打开了一个新错误。它在.header2 div的中心对齐。如果您希望将total container放在中心，您可以为.header2设置边距：0 auto并删除float:left