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

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

butterflydream

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

阅读量852

点赞数

分类专栏： web前端文章标签： web div css xhtml float html

本文链接：https://blog.csdn.net/butterflydream/article/details/5967891

版权

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

摘要由CSDN通过智能技术生成

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;