Question

布局看起来像这样：

abc     1 2 
bcd     1 2 3 4
eaasd   5 6

我听说使用表格进行布局并不好，所以在这种情况下你会做什么？

Answer 1

如果您需要显示表格数据，只需使用表格。

如果您想要与示例完全相同，则可以使用<pre>，但这可能与您期望的完全不同。

Answer 2

将表用于一般布局而不是表格数据是不好的。因此，对于您的情况，使用表格是最好的主意。

Answer 3

尝试使用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

Answer 4

您可以按照以下方式制作基于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>

希望它有所帮助。

如何在没有桌子的情况下制作这种风格？

4 个答案: