Question

我在一个div中有两个内部浮动的div

我希望外部位于页面的中心，所以我使用了margin：auto;

我希望外部div继承两个子div的宽度。

示例here

html是 -

<div class=area>

<div id=aleft>
    This is on the left
</div>
<div id=left>
    This is another on the left
</div>
<div style="clear:both;"></div>

对于外部div中的那个，我在css中使用了width inherit但是没有用。

所以现在我使用固定的800px。

css -

.area {
   margin: auto;
   background-color:black;
   color:orange;
   posiition:absolute;
   width:800px;
}
#aleft {
   float:left;
   width:200px;
   border:2px solid white;
}

#left {
   float:left;
   width:500px;
   border:2px solid white;
}

Answer 1

默认情况下，<div>是块元素，它会占用整个可用宽度。将inline-block应用于外部div并将其移除display:inline-block以像素为单位，将其更改为width元素。

Updated pen

Answer 2

尝试使用<table>。

<table style="position: relative; left: 0; right: 0; margin: 0 auto;">
    <tr>
        <td style="padding: 0; margin: 0; width: 300px;">
            left
        </td>
        <td style="padding: 0; margin: 0; width: 400px;">
            right
        </td>
    </tr>
</table>

外部div继承内部浮动div的宽度

2 个答案: