html - 像 HTML 表格一样使用 CSS/Div 设计页面布局

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;
}

结果截图