Question

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

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

Answer 1

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

使用

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

}

而不是

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

}

Answer 2

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

从 .inner div中移除 float 并通过不指定宽度，宽度是动态的，它允许您使用填充和保证金自由。

更重要的一件事：注意我改变了选择器：

.pricing div {
 ...
}

为：

.pricing > div {
 ...
}

＆gt;符号表示选择仅 * 直接子女 *，这些是'的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。你需要给容器divs一个类，改变你的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%
}

无法在CSS中设置div宽度

5 个答案: