如何设置孩子两个div 50%,50%与父div

Question

我有以下的模式.如何将第一个和第二个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的关闭和第二个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>