css - CSSでdiv幅を設定できません

Question

3つの内部divを同じサイズにしたいのですが。これの何が問題なのか教えていただけますか？

http://jsfiddle.net/8uasY/

実際には、内側のdivを等間隔に配置したいので、マージンを追加すると、次のようになります：http: //jsfiddle.net/8uasY/11/、内側のdivはもう同じ行にありません

Answer 1

セレクターを正しく使用していなかったこのリンクを確認してください。div'sこれは、 3人の子供ではなく、同じ幅の6人を作成していましたdiv's。

使用する

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

}

それ以外の

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

}

Answer 2

ここにあります：http://jsfiddle.net/4kzhk/

.inner divからフロートを削除し、幅を指定しないことで、幅が動的になり、パディングとマージンを自由に使用できます。

もう1つ重要なこと：セレクターを次から変更することに注意してください：

.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%
}

1 つのラッパー 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%
}