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%;
}

<强> Example

重要说明：

不要在div之间留下空格
您也可以使用浮点数代替display:inline-block;
如果示例中的元素不对齐，则浏览器不支持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>

Answer 3

首先将父宽度设置为某个值。

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

然后设置childDiv宽度。

如何设置孩子两个div 50％，50％与父div

3 个答案: