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

美好的一天！我做了一些reasearch和我读到这里difference between css height : 100% vs height : auto 宽度：自动获取父元素的大小

是高度自动应采取的空间取决于孩子的宽度最低金额。

在我的情况下，此属性的作用就像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>

的问题是：哪里是我的错误？

来源

2013-07-16 Bloodcount

宽度：100％将占据其容器的整个宽度。在你的情况下，它是带有header2类的div。 – Gangadhar

是的，但是我想弄清楚为什么'buttonHolder'正在使用整个'header2'。 – Bloodcount

你能说清楚你想要'buttonHolder'div吗？ – Gangadhar

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


    height:24px; 
    background:black; 
}

这应该工作。

来源

2013-07-16 07:35:51 Gangadhar

它的工作原理，但它打破了'保证金：0汽车;'我用它来居中div，所以它解决了这个问题，但是却打开了一个新的bug。 – Bloodcount

它在.header2 div的中心对齐。如果你想在中心的总容器，你可以把保证金：0自动为.header2和删除浮动：左 – Gangadhar

我明白了，谢谢！ – Bloodcount

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

回答

相关问题