2016-08-20 10 views
0

ラッパーのdivに2つのタブを追加しようとしていて、それぞれの横幅を半分にして横になってしまいます。div内を親の中に並べて表示しますか?

width: 50%; 
height: 100%; 
display: inline-block; 

何らかの理由で、次のCSSをお互いにではなく、互いの下に表示し続けます。

私が起こっていただきまし表示するようにJsFiddleをした:http://jsfiddle.net/5zLoyc7q/1/

誰もが、彼らは通常のタブのような次お互いに嘘をついているので、私はそれらを得る助けてくださいことはできますか?

+1

[子divを50%、親divを50%に設定する方法]の複製が可能です(http://stackoverflow.com/questions/11311604/how-to-set-the-child-two-div -50-50-with-the-parent-div) – Aziz

答えて

3

なぜ浮動しないのですか? box-sizingborder-boxであることを確認してください。次へ:

<div class="wrapper"> 
    <div>Hello world</div> 
    <div>Guten Tag</div> 
</div> 

CSS:

.wrapper { 
    overflow:auto; 
} 
.wrapper > div { 
    float:left; 
    width: 50%; 
}  

display:inline-blockは、要素の右側に空白の1ピクセルを追加します。また、ボーダーボックスとして表示していない場合、ボックスモデルの問題に遭遇する可能性があります。言い換えれば、あなたの50%はあなたの考えではありません。

更新済み:http://jsfiddle.net/5zLoyc7q/2/ フロートをクリアしてください。

+0

フロートが動作しているようです! – MarksCode

+0

私はfloatsとinline-blockの使い分けが好きです。浮動小数点数をクリアする必要がありますが、レイアウトをより詳細に制御できるように感じます。 – Kilmazing

関連する問題