Question

此table会导致A和B间隔以填充页面宽度（请参阅fiddle）：

<table style="width:100%; text-align:center;">
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
</table>

如何使用div元素实现相同的效果？不是这样的（见fiddle）：

<div style="width:100%; text-align:center;">
  <div style="float:left">A</div>
  <div style="float:left">B</div>
</div>

Answer 1

以下两种方法不要求您在子元素上设置50%的宽度。

CSS表：

只需将父元素的display设置为table，将子元素设置为table-cell。

Updated Example

＆＃13;

.parent {
    display: table;
    width: 100%;
    text-align: center;
}
.parent > div {
    display: table-cell;
}

＆＃13;

<div class="parent">
    <div>A</div>
    <div>B</div>
</div>

＆＃13;

Flexbox的：

或者，您也可以将父元素的display设置为flex。然后为子元素赋予宽度100%：

Updated Example

＆＃13;

.parent {
    display: flex;
    text-align: center;
}
.parent > div {
    width: 100%;
}

＆＃13;

<div class="parent">
    <div>A</div>
    <div>B</div>
</div>

＆＃13;

Answer 2

您可以使用以下两种方法：

http://jsfiddle.net/h1x1tuav/4/

<div id="test1">
    <div>A</div>
    <div>B</div>
</div>
<div id="test2">
    <div>A</div>
    <div>B</div>
</div>

<style>
#test1 > div {
    float: left;
    display: inline-block;
    text-align: center;
    width: 50%;
}

#test2 {
    width: 100%;
    display:table;
}
#test2 > div {
    display: table-cell;
    text-align: center;
}
</style>

Answer 3

我建议在不使用float的情况下完成此操作，因为它会从文档的正常流程中删除div并需要额外的html和css。

相反，将两个子div显示为'inline-block'。

以下内容与使用表格进行设置相同。

<强> HTML

<div class="parent">
    <div>A</div>
    <div>B</div>
</div>

<强> CSS

.parent {
    font-size: 0; /* to perfectly align the two children divs */
    width: 100%;
}

.parent > div {
    display: inline-block;
    font-size: 12px; /* or whichever size you like */
    width: 50%;
}

Answer 4

你必须向左和向右浮动一个，并在这种情况下给予相同的宽度50％和文本对齐中心。试试这个：

<div style="width:100%; text-align:center;">
    <div style="float:left;width:50%;text-align:center">A</div>
    <div style="float:right;width:50%;text-align:center">B</div>
</div>

展开div以填充页面宽度

4 个答案:

CSS表：

Flexbox的：