布局看起来像这样:
abc 1 2
bcd 1 2 3 4
eaasd 5 6
我听说使用表格进行布局并不好,所以在这种情况下你会做什么?
答案 0 :(得分:3)
如果您需要显示表格数据,只需使用表格。
如果您想要与示例完全相同,则可以使用<pre>
,但这可能与您期望的完全不同。
答案 1 :(得分:3)
将表用于一般布局而不是表格数据是不好的。因此,对于您的情况,使用表格是最好的主意。
答案 2 :(得分:1)
尝试使用inline-block
或flexbox
等CSS。以下是inline-block
的示例:
<div class="column">
<p>
abc
</p>
<p>
bcd
</p>
<p>
eaasd
</p>
</div>
...
使用CSS:
.column {
display:inline-block;
}
请参阅jsfiddle。
另请查看Bootstrap的网格系统(如果您的内容少于13列宽):http://getbootstrap.com/css/#grid
答案 3 :(得分:1)
您可以按照以下方式制作基于div的布局。并使用display:inline-block
。
.main > div {
display: inline-block;
padding: 5px;
width: 50px;
}
<div class="main">
<div>abc</div><div>1 2</div>
</div>
<div class="main">
<div>bcd</div><div>1 2 3 4</div>
</div>
<div class="main">
<div>eaasd</div><div>5 6</div>
</div>
希望它有所帮助。