使用CSS / Div设计页面布局像HTML表 [英] Design page layout using CSS/Div like HTML table

问题描述

由于我是新的CSS，我不知道如果以下页面布局是可能使用Div / CSS或者我应该使用HTML表？

我想设计我的页面，左边（即约30％）分成3部分，有一些边距（即一列和3行）该页面在2行（即一列和2行）。

不知道我能否正确解释。我有图片文件，但Stackflow不允许我上传，因为声誉较少。

解决方案

$ b $ < table> b

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

• CSS布局

这是布局的一个示例： p>

• jsFiddle
• 
  

HTML

 < div class =left-column> 
< div>左侧行1< / div> 
< div>左侧第2行< / div> 
< div>左侧行3< / div> 
< / div> 
< div class =right-column> 
< div>右侧排1< / div> 
< div>右侧第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; 
} 
  

结果屏幕截图

Since i am new to CSS, i am not sure if the following page layout is possible using Div/CSS or shall i use HTML table?.

i want to design my page such that, Left side (i.e around 30%) divide into 3 parts with some margin (i.e one Column and 3 rows) and rest of the page in 2 rows (i.e one Column and 2 rows).

Not sure if i could explained it properly. I have the image file but Stackflow does not allow me to upload because of less reputation.

解决方案

You don't need to use <table> for the layout you described (and you won't need anything CSS3 or HTML5 specific).

There are a few options for implementing this layout. Here's a good tutorial on CSS layout:

• CSS Layouts

Here is one example of your layout:

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

Screenshot of results

这篇关于使用CSS / Div设计页面布局像HTML表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！