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

WBOYOriginal: 2016-06-24 12:30:061386Durchsuche

一、两列自适应宽度
下面以常见的左列固定右列自适应为例，因为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>
```

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

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

In Verbindung stehende Artikel