十天学会Div+CSS第三天之【二列和三列布局】_html/css_WEB-ITnose

WBOY원래의: 2016-06-24 12:30:061363검색

一、两列自适应宽度
下面以常见的左列固定右列自适应为例，因为div为块状元素，默认情况下占据一行的空间，要想让下面的div跑到右侧，就需要做助css的浮动来实现。首先创建html代码如下：

<div id="side">此处显示 id "side" 的内容</div><div id="main">此处显示 id "main" 的内容</div>

div创建完成后，开始创建css样式表，代码如下：

#side { background: #99FF99; height: 300px; width: 120px; float: left; }#main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; }

然后创建#main样式，注意这里设置#main的左边距为120px。预览结果如下：

二、两列固定宽度
有了前面的基础，两列固定宽度就容易多了，只需要把#main的宽度由百分比改为固定值。

三、两列固定宽度居中
两列固定宽度居中，需要在两列固定宽度的基础上改进，在学一列固定宽度居中时，我们知道让它居中的方法，所以这里需要在这两个div之外再加一个父div：

<div id="side">此处显示 id "side" 的内容</div><div id="main">此处显示 id "main" 的内容</div>

css代码如下：

#content { width:470px; margin:0 auto;}#side { background: #99FF99; height: 300px; width: 120px; float: left; }#main { background: #99FFFF; height: 300px; width: 350px; margin-left: 120px; }

四、xhtml的块级元素(div)和内联元素(span)
块级元素：就是一个方块，像段落一样，默认占据一行出现；

内联元素：又叫行内元素，顾名思义，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。

一般的块级元素诸如段落

、标题

...、列表,

、表格、表单、DIV
和BODY等元素。而内联元素则如: 表单元素、超级链接
、图像、
........ 块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。

块级元素默认占据一行，相当于在它之前和之后各插入了一个换行；而内联元素span没对显示效果造成任何影响，事实也是如此；em只是让字体变成了斜体，也没有单独占据一行。这就是块级元素和内联元素，正因为有了这些元素，才使我们的网页变得丰富多彩。

如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。也就是说，可以用css的display:inline将块级元素改变为内联元素，也可以用display:block将内联元素改变为块元素。

五、三列自适应宽度
三列自适应宽度，一般常用的结构是左列和右列固定，中间列根据浏览器宽度自适应。下面在二列自适应宽度基础上修改一下
```
<div id="side">此处显示 id "side" 的内容</div><div id="side1">此处显示 id "side1" 的内容</div><div id="main">此处显示 id "main" 的内容</div>
```
```
#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }
```
把原来#main样式的width:70%去掉，然后设置左右外边距各120px，让出左右列的宽度
```
#main { background: #99FFFF; height: 300px; margin:0 120px; }
```
六、三列固定宽度
三列固定宽度可以在三列自适应基础上添加一个父div，并设置这个div的宽度即可，如下，添加一个id为content的父容器。

在源代码里选中这三个div，然后点击工具栏上的“插入div标签”按钮，这时弹出的窗口插入项会默认为：在选定的内容旁换行，输入id为content，然后给这个div定义个宽度

三列固定宽度出来了，要想实现三列固定宽度居中就更方便了，只需设置#content {margin:0 auto;}即可
```
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style>body { margin:0;}#content { width:470px; margin:0 auto;}#side { background: #99FF99; height: 300px; width: 120px; float: left; }#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }#main { background: #99FFFF; height: 300px; margin:0 120px; }</style></head></p><p><body><div id="content">  <div id="side">此处显示 id "side" 的内容</div>  <div id="side1">此处显示 id "side1" 的内容</div>  <div id="main">此处显示 id "main" 的内容</div></div></body></html>
```

성명：

十天学会Div+CSS第三天之【二列和三列布局】_html/css_WEB-ITnose

관련 기사