web标准学习第三天：两列布局

最新推荐文章于 2023-12-09 22:37:33 发布

原创最新推荐文章于 2023-12-09 22:37:33 发布 · 894 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web #div #css #xhtml #float #html

web前端专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何使用CSS实现两列布局，通过设置div的float属性和margin-left来调整布局。同时讨论了如何让两个div居中显示，通过添加一个父div并设置margin属性为auto。此外，还探讨了浮动属性float的作用，以及如何利用浮动实现类似Word中的文字环绕效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、如何实现两列单行布局？

答：div是块级元素，默认占一行，要想让下面的div跑到右侧，就要用到css的float属性。代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#side {
background-color: #66F;
height: 600px;
width: 120px;
float: left;
}
#main {
background-color: #0CF;

width:700px;

margin_left:120px;
height: 600px;
}
</style>
</head>

在#main中设置了margin-left:120px，正好让出#side占去的120px宽度（文章出处：标准之路，如是说）。但是其实不设置margin-left:120px，可以有同样的效果。此处有待进一步研究！

效果如下图所示：

2、如何实现其居中呢？

如果将#main中width属性去掉，那么右边div会将右边填满，并随着浏览器窗口大小的变化而变化。但如果固定其width值，如上图所示，将会靠左对齐，如果想让两个div居中显示，就要为他们再添加一个父div，令其父div的margin属性值为auto（如上篇文章所说），也就是使其父div居中，从而达到他们的居中。代码如下：

#content {
margin: auto;
width:824px;
}
</style>
</head>

</body>
</html>
在这里需要注意：设置margin：auto是使元素自身居中。如果该元素属于块元素，需要为其设置width属性，才能实现居中效果。效果图如下：

3、刚才提到了块级元素，那么什么是块级元素，除了块级元素还有什么元素？

答：元素主要分为两类：

一、块级元素：默认占据一行，比如div、p、h1-6、ul、ol、li、table、body、form等；

二、内联元素：也叫行内元素，顾名思义，只能放在行内，就像一个一个单词，不会造成前后换行，起辅助作用，比如：input、a、img、span、Strong、em等。

在css看来，一切皆为框，块级元素为块框，行内元素称为行内框。可以通过display属性改变框的类型：

一、行内框变为块框：设置display为block；

二、块框变为行内框：设置display为inline；

三、隐藏框显示：设置display为none。

4、今天我们用到的float属性，到底有什么作用？

答：CSS1 中首次提出了浮动，它以 Netscape 在 Web 发展初期增加的一个功能为基础。浮动不完全是定位，不过，它当然也不是正常流布局。浮动框不在文档的普通流中，文档普通流中的块框表现得就像浮动框不存在一样（该句有待考证）。

在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素；且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。

下面我们看一下如何使用float属性实现word中文字缠绕排班。

首先，写一段代码如下：

<body>
<div id="side">
<img src="http://www.aa25.cn/uploadfile/taobao0903/20090212165039036721.gif" width="192" height="142" />
</div>
<div id="main">
标准之路[www.aa25.cn]提供DIV+CSS教程,DIV+CSS视频教程,web2.0标准,DIV+CSS布局入门教程,网页布局实例,css布局实例,div+css模板,div+css实例解析,网站重构，网页代码,水晶图标,幻灯广告图片.教程适合初学者循序渐进学习!
</div>
</body>
</html>
其效果如下图：

下面我们让side浮动，看看效果。

代码修改如下：添加

#side {
float: left;
}
body {
font-size: 28px; //使得字体变大，所占空间变多
line-height: 200%;
}

效果图如下：

大家看看，是不是和word的效果已经很像相了，但这里的文字和图片右侧贴的很近，怎么办呢？刚才已经说了，当元素浮动过之后，需要指定一个宽度，否则它会尽可能窄。那么把side的宽度设置为大于图片的宽度，它们中间应该就有空隙了。图片的宽度是192px，设置side为202px，中间将会有10px的空隙了。

body { font-size:18px; line-height:200%; }
#side { float:left; width:202px;}

细心的朋友已经发现，上例中#main的div还定义了margin-left:120px;而这里没有定义，但它多出的文字却跑到了图片(#side)的下方，是不是设置margin-left:后，它就不会跑到#side的正文呢？如果你能想到这一点，你的确是太聪明了，事实确实是这样，在css样式表中加上下面一行

#main { margin-left:202px;}