网络论坛表格布局

时间:2016-03-12 00:13:14

标签: html html-table

我有一个关于在网络论坛中使用表格结构的问题。

picture of layout

我知道如何为所有内容制作单个单元格,我只是不确定如何正确制作表格布局。

log4j.appender.oozie.RollingPolicy.MaxHistory=720

这就是我认为我会使用各种方块的方式。任何关于如何设置3列(表结构)的帮助,所以它将具有如上图所示的布局将非常感激。只是为了更清楚......如何在1列中获得结构披萨和电话号码/成本,然后在第2列中有个人信息,奶酪等然后在图像中有图像第3栏。

1 个答案:

答案 0 :(得分:0)

以下只是使用CSS进行布局的一种方法。更现代的方法是使用flex-box(https://css-tricks.com/snippets/css/a-guide-to-flexbox/),但是flex-box更复杂。

您可以将所需的任何内容放入每个<div>中,当它浮动时,它就像一个列,或者当它没有时,它就像一个列。

&#13;
&#13;
#col1, #col2, #col3 {float:left; border:1px solid #000;box-sizing:border-box;}
#col1 {width:20%;}
#col2, #col3 {width:40%;}
#footer {clear:both; background:#000; color:#fff;}
&#13;
<div id="wrapper">

  <div id="col1">column 1</div>
  <div id="col2">column 2</div>
  <div id="col3">column 3</div>
  <div id="footer">footer</div>
  
</div>
&#13;
&#13;
&#13;