使用div的表格格式

<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上面的表格示例中獲得的相同結果？使用div的表格格式

來源

2015-09-04 Michael Grigsby

這些都不是div的。他們是表格單元格，你不應該是浮動表格單元格。 –

如果您有機會使用CSS框架，請檢查[this]（http://getbootstrap.com/getting-started/） –

請查看：https://css-tricks.com/snippets/css/a-guide -to-flexbox/ –

您可以創建兩個div，並設置其顯示屬性設置爲inline-block的：

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

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

您也可以浮動兩個div的：

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

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

然後還有Flexbox的

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

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

來源

2015-09-04 19:16:24 j08691

感謝您的支持！ –

使用div的表格格式

回答

相關問題