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

Question

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

我想设计我的页面,左边(即大约30%)分为3个部分,有一些边距(即一列和3行),页面的其余部分分为2行(即一列和2行).

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

Answer 1

您不需要使用<table>您描述的布局(并且您不需要任何特定的CSS3或HTML5).

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

• CSS布局

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

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

结果截图