如何让div它们在一行显示

最新推荐文章于 2024-07-09 23:24:46 发布

原创最新推荐文章于 2024-07-09 23:24:46 发布 · 3.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #class #float #xhtml #vb #html

css 专栏收录该内容

6 篇文章

订阅专栏

本文展示了一个使用HTML、CSS和XHTML1.0严格标准的网页设计案例，通过不同的颜色区块来区分内容区域，实现视觉上的鲜明对比。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
<!--
body {font-size:12px; 
         margin:0;
        padding:0;}
#head { position:relative; 
            margin: auto;         /*---页面居中的写法------*/
            width:900px;        /*----加了宽度效果就看得出了，原来是全屏的-----*/
}
.vb { 
    float:left;
	height: 200px;
	width: 300px;
	background:#CC0000;
}
.bb {float:left;
	height: 200px;
	width: 300px;
	background:#3300CC;
}
.vv {float:left;
	height: 200px;
	width: 300px;
	background:#FF9900;
-->
</style>
</head>
<body>
<div id="head">
  <div class="vb">此处显示  class "vb" 的内容</div>
  <div class="bb">此处显示  class "bb" 的内容</div>
  <div class="vv">此处显示  class "vv" 的内容</div>
</div>
</body>
</html>