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

时间:2016-01-06 03:32:02

标签: css

布局看起来像这样:

abc     1 2 
bcd     1 2 3 4
eaasd   5 6

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

4 个答案:

答案 0 :(得分:3)

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

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

答案 1 :(得分:3)

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

答案 2 :(得分:1)

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

希望它有所帮助。