Question

<table style="width: 100%">
<tr>
<td class="left">Left side content </td>
<td class="right">Right side content</td>
</tr>
</table>

使用上面的代码我可以使两个div左右浮动而不会破坏任何东西。如果我使用float：left或float：right属性，事情会因为position：changes而中断。我最近被告知的一件事是桌子是旧的新闻，并且在其位置使用div是新的。但有人可以向我解释如何实现我从div上面的表格中得到的相同结果吗？

Answer 1

您可以创建两个div并将其display属性设置为inline-block：

＆＃13;

div {
    display:inline-block;
    background: #999;
    width:50%;
}

＆＃13;

<div>Left side content</div><div>Right side content</div>

＆＃13;

你也可以浮动两个div：

＆＃13;

div {
    float:left;
    background: #999;
    width:50%;
}

＆＃13;

<div>Left side content</div><div>Right side content</div>

＆＃13;

然后是flexbox

＆＃13;

 .flex {
     width: 100%;
     display: -webkit-flex;
     display: flex;
     -webkit-flex-direction: row;
     flex-direction: row;
 }
 .flex > div {
     -webkit-flex: 1 1 auto;
     flex: 1 1 auto;
     background: #999;
 }

＆＃13;

<div class="flex">
    <div>Left side content</div>
    <div>Right side content</div>
</div>

＆＃13;

使用div的表格式

1 个答案: