css - 无法在 CSS 中设置 div 宽度

Question

我想让三个内部 div 具有相同的大小。你能告诉我这有什么问题吗？

http://jsfiddle.net/8uasY/

实际上，我希望内部 div 间隔均匀，所以当我添加边距时，我得到：http: //jsfiddle.net/8uasY/11/，内部 div 不再在同一行

Answer 1

检查此链接您没有正确使用选择器。这使您的六个div's宽度相同，而不是只有三个 child div's。

采用

.pricing div div{
float :left ;
width:33% ;

}

代替

.pricing div{
float :left ;
width:33% ;

}

Answer 2

这里是：http: //jsfiddle.net/4kzhk/

通过从.inner div中删除浮动并且不指定宽度，宽度是动态的，它允许您自由使用填充和边距。

更重要的一件事：注意我将选择器从：

.pricing div {
 ...
}

到：

.pricing > div {
 ...
}

> 符号表示仅选择*直接子代* 这是'.pricing'的 div

Answer 3

您不需要所有的包装 div，只需选择 div.inner

.inner 
{
    border : 1px solid #ccc ;
    border-radius: 8px 8px 0 0;
    min-height :120px ;
    box-shadow: 0 0 8px rgba(0, 0, 0, .3);
    padding :20px ;
    box-sizing: border-box; 
    float: left ;
    width: 33%;
}

http://jsfiddle.net/Kyle_Sevenoaks/8uasY/12/

Answer 4

宽度 33% 将应用于您主 div 下的所有 div。你需要给你的容器 div 一个类，像这样改变你的 HTML/CSS ...

<div class="pricing">   
   <div class="outer"><div   class="inner">  satarter   </div> </div>
   <div class="outer"><div  class="inner">   best value </div> </div>
   <div class="outer"><div  class="inner">   busness    </div> </div>
</div>
<style>
.pricing div.outer {
    float :left ;
    Width:33% ;

}

.inner 
{
    border : 1px solid #ccc ;
    Background-color: yellow;
    -webkit-border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
    min-height :120px ;
     box-shadow: 0 0 8px rgba(0, 0, 0, .3);
     /*margin :10px ;*/
     padding :20px ;
      -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
   /*width:180px ;*/
Width: 100%;
   display :block ;
   float: left ;
}

</style>

Answer 5

您没有正确选择 div。

您可以：

.pricing {width: 100%}
.pricing div {
float: left;
width: 33%
}

并删除一个包装 div：

<div class="pricing">   
   <div class="inner">  satarter   </div>
   <div class="inner">   best value </div>
   <div class="inner">   busness    </div>
</div>

或者只是选择实际的 div 来增加大小：

.pricing {width: 100%}
.pricing div div {
float: left;
width: 33%
}