css - 子 2 div を 50%、親 div で 50% に設定する方法

Question

私は次のようなパターンを持っています。最初と2番目のchildDivクラスのcss変更を親divの50%に適用する方法

子 div に 50%、50% を設定するにはどうすればよいですか?

<div class="parentDiv">
    <div class="childDiv">   // 50% width
   </div>
   <div class="childDiv">   // 50% width
   </div>
</div>

Answer 1

.childDiv{
   display:inline-block;
   width:50%;
}

例

重要な注意事項：

1. divの間に空白を残さないでください
2. 代わりにフロートを使用する方がよいでしょうdisplay:inline-block;
3. 例で要素が整列していない場合、ブラウザはサポートしていませんbox-sizing。境界線を省略してください（説明のみを目的としています）。

Answer 2

ここにはちょっとしたトリックがあり、それを知っておく必要があります。最初の div の終了と 2 番目の div の開始の間に空白を入れると、ブラウザーに表示されるスペースのため、50% は機能しません。

これを行うにはいくつかの方法があります。最新のブラウザー (IE9+、FF、Chrome、Safari) のみをターゲットにしている場合は、次を使用できますinline-block。

<style>
    .childDiv {
        display: inline-block;
        width: 50%;
    }
</style>

<div class="parentDiv">
    <div class="childDiv">   // 50% width
    </div><div class="childDiv">   // 50% width
    </div>
</div>

ただし、IE7 は をサポートしていないためinline-block、フロートを使用して「昔ながらの」方法に進むことができます。

<style>
    .childDiv {
        float: left;
        width: 50%;
    }
</style>

<div class="parentDiv">
    <div class="childDiv">   // 50% width
    </div><div class="childDiv">   // 50% width
    </div>
    <div style="clear: both"></div>
</div>

両方の列の幅を正確に同じにして、その間に小さなギャップを残したい場合は、異なるスタイルのフロートを使用してください。この方法では、使用する幅が 50% 未満である限り、div 間のマークアップで空白を削除する必要はありません。

<style>
    .childDiv {
        width: 49.5%;
    }
    .left { float: left; }
    .right{ float: right; }
</style>

<div class="parentDiv">
    <div class="childDiv left">   // 49.5% width
    </div>
    <div class="childDiv right">   // 49.5% width
    </div>
    <div style="clear: both"></div>
</div>

Answer 3

親の幅を最初に設定します。

.parentDiv
{
width: //insert width of the parentDIV
}

その後、childDiv の幅を設定します。