哪位大侠知道用DIV+CSS如何做出类似一行三列的效果呢?

来源:百度知道 编辑:UC知道 时间:2024/06/07 04:05:20
如图左右两小黑椭圆#h1{width:12px;height:52px;}中间部分#h2{width:928px;height:35px;}右边小黑椭圆#h3{width:12px;height:52px;}
最关键的是左右两个椭圆高度和中间椭圆不一样,小弟初学也不知道如何将DIV进行对齐,希望哪位大侠可以帮帮忙。感激不尽!!希望把代码也发上来,谢谢各位了。。

每个里面加上float:left

中间的加上margin-top:8px

这个前,外面最好要有一层整个的DIV

#bo{height:52px; width:952px;}/*外面大DIV*/
#h1{width:12px;height:52px; float:left; background:#666666;}
#h2{width:928px;height:35px;background:#cccccc; margin-top:8px;float:left;}
#h3{width:12px;background:#666666;height:52px;float:left;}

另外,把习惯改改,不要动不动就全用#号,一般加样式都用class的.号,调用用class=,id、#号一般都是指定某一模块

<!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>
</