css - 如何设置子两个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>

如果您想确保两列的宽度完全相同并且它们之间仍然有一个小的间隙，请使用不同样式的浮动。请注意，此方法不需要您消除 div 之间标记中的空格，只要您使用的宽度小于 50%：

<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 宽度。