100％子div要素はdivタグが同じ行にない理由を私はよく分からない異なる行

Question

にありますか？ 40％を使用すると、2つの子divが適切に整列します。

私はフロート解決策を求めていません。なぜこれが動作していないのか知りたいだけです。

Answer 1

フローティングディビジョンを使用する必要があります。

float: left; 

をし、プロパティを持つ行の空のdivの末尾に追加浮い停止する：追加

clear:both; 

Answer 2

シンプル：

• あなたの親のdivは100pxに
• 子供であるインラインですブロック（サイドバイサイド）
• 子供は50％（50px）

ただし、インラインブロックを使用する場合、改行/空白は要素間に「ギャップ」を導入します。したがって、50px + 50px +「ギャップ」=親の幅よりも大きくなり、子を強制的に横に座っている。

そのギャップを回避するために、空白を入れないでください：

<ul> 
    <li> 
     item 
    </li><li> //close and open immediately, no gaps 
     item 
    </li><li> 
     item 
    </li> 
</ul> 

Answer 3

：開閉は何の空白を持っていないよう

<parent> 
    <child>foo</child><child>bar</child> 
        ^^^--no gap, whitespace or newline between 

通常、私は、リスト項目の上に、このようにそれを行いますdisplay：inline-blockは、常に右からいくらかのスペースをとります。

.parent {font-size:0;} 
.child {font-size:15px} 

チェックこのhttp://jsfiddle.net/LXHfy/6/