使用CSS / Div设计页面布局，如HTML表格

Question

由于我是CSS新手，我不确定使用Div / CSS是否可以使用以下页面布局，或者我是否应该使用HTML表格？

我想设计我的页面，左侧（即大约30％）分成3个部分，有一些边距（即一列和3行），页面的其余部分分为2行（即一列和2行） ）。

不确定我是否能正确解释。我有图像文件，但Stackflow不允许我上传，因为声誉较低。

Answer 1

您不需要将<table>用于您所描述的布局（并且您不需要任何特定的CSS3或HTML5）。

实现此布局有几个选项。这是一个关于CSS布局的好教程：

• CSS Layouts

以下是您的布局的一个示例：

• jsFiddle

HTML

<div class="left-column">
  <div>Left Side Row 1</div>
  <div>Left Side Row 2</div>
  <div>Left Side Row 3</div>
</div>
<div class="right-column">
  <div>Right Side Row 1</div>
  <div>Right Side Row 2</div>
</div>

CSS

.left-column, .right-column{
  float:left;
}
.left-column{
  width:30%; 
}
.right-column{
  width:60%; 
}
div{
  padding:10px;
  border:solid 1px black;
}

结果截图

Answer 2

还有另一种方法可以按div/css

制作表格

- html

    <div id="container">
      <div id="row">

        <div id="left">
            <h4>Left Col</h4>
            <p>...</p>
        </div>

        <div id="middle">
            <h4>Middle Col</h4>
            <p>...</p>
        </div>

        <div id="right">
            <h4>Right Col</h4>
            <p>...</p>
        </div>

        </div>
    </div>

• CSS

  

#container {       显示：表;       }

     

#row {       显示：table-row;       }

     

#left，＃right，＃middle {       显示：table-cell;       }

Answer 3

听起来你要么想要一个两列或三列的布局。以下是一些用于了解如何创建的链接：

<强> 2列： http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

第3列： http://www.456bereastreet.com/archive/201012/how_to_create_a_3-column_layout_with_css/