如何用DIV+CSS把图中所示的图片布局表现出来？
图中所示的A、B、C、D、E代表宽度不同的五张图片。请问如何用DIV+CSS把图中所示的图片布局表现出来？height必须得给出值吗？...
图中所示的A、B、C、D、E代表宽度不同的五张图片。
请问如何用DIV+CSS把图中所示的图片布局表现出来？
height 必须得给出值吗？ 展开
请问如何用DIV+CSS把图中所示的图片布局表现出来？
height 必须得给出值吗？ 展开
4个回答
展开全部
大致写了一个~共享下就算提供个思路吧~采纳与否无所谓：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
#web_a {
background-color: #FF0000;
float: left;
height: 600px;
width: 200px;
}
#web_mid {
float: left;
height: 600px;
width: 200px;
}
#web_mid #web_b {
background-color: #00CC00;
height: 300px;
}
#web_rig {
float: left;
height: 600px;
width: 200px;
}
#web_mid #web_c {
background-color: #0000FF;
height: 300px;
}
#web_rig #web_d {
background-color: #FF00FF;
height: 20%;
}
#web_rig #web_e {
background-color: #FF9900;
height: 80%;
}
-->
</style>
</head>
<body>
<div id="web_a">
</div>
<div id="web_mid">
<div id="web_b"></div>
<div id="web_c"></div>
</div>
<div id="web_rig">
<div id="web_d"></div>
<div id="web_e"></div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
#web_a {
background-color: #FF0000;
float: left;
height: 600px;
width: 200px;
}
#web_mid {
float: left;
height: 600px;
width: 200px;
}
#web_mid #web_b {
background-color: #00CC00;
height: 300px;
}
#web_rig {
float: left;
height: 600px;
width: 200px;
}
#web_mid #web_c {
background-color: #0000FF;
height: 300px;
}
#web_rig #web_d {
background-color: #FF00FF;
height: 20%;
}
#web_rig #web_e {
background-color: #FF9900;
height: 80%;
}
-->
</style>
</head>
<body>
<div id="web_a">
</div>
<div id="web_mid">
<div id="web_b"></div>
<div id="web_c"></div>
</div>
<div id="web_rig">
<div id="web_d"></div>
<div id="web_e"></div>
</div>
</body>
</html>
本回答由提问者推荐
已赞过
已踩过<
你对这个回答的评价是？
展开全部
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title>ABCDE</title>
<style type="text/css">
body { margin: 0; padding: 0; text-align: center; }
#main { width: 850px; height: 1000px; background: #ddd; }
.left { float: left; width: 250px; height: 1000px; background: #FF0000; }
.con { float: left; width: 200px; height: 1000px; }
.con .up { width: 200px; height: 50%; background: #36FF00; }
.con .down { width: 200px; height: 50%; background: #0006FF; }
.right {float: left; width: 400px; height: 1000px; }
.right .up {width: 400px; height: 30%; background: #FF00CC; }
.right .down {width: 400px; height: 70%; background: #FF6C00; }
</style>
</head>
<body>
<div id="main">
<div class="left">
A在左
</div>
<div class="con">
<div class="up">
B在中上
</div>
<div class="down">
C在中下
</div>
</div>
<div class="right">
<div class="up">
D在右上
</div>
<div class="down">
E在右下
</div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title>ABCDE</title>
<style type="text/css">
body { margin: 0; padding: 0; text-align: center; }
#main { width: 850px; height: 1000px; background: #ddd; }
.left { float: left; width: 250px; height: 1000px; background: #FF0000; }
.con { float: left; width: 200px; height: 1000px; }
.con .up { width: 200px; height: 50%; background: #36FF00; }
.con .down { width: 200px; height: 50%; background: #0006FF; }
.right {float: left; width: 400px; height: 1000px; }
.right .up {width: 400px; height: 30%; background: #FF00CC; }
.right .down {width: 400px; height: 70%; background: #FF6C00; }
</style>
</head>
<body>
<div id="main">
<div class="left">
A在左
</div>
<div class="con">
<div class="up">
B在中上
</div>
<div class="down">
C在中下
</div>
</div>
<div class="right">
<div class="up">
D在右上
</div>
<div class="down">
E在右下
</div>
</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<div style="width:300px; border:#cccccc 1px solid; padding:8px;">
<div style="width:100px;height:300px;float:left;background:#ff0000;">
A
</div>
<div style="width:60px;height:300px;float:left;">
<div style="width:60px;height:150px;float:left;background:#66FF00;">
B
</div>
<div style="width:60px;height:150px;float:left;background:#3300FF;">
C
</div>
</div>
<div style="width:120px;height:300px;float:left;">
<div style="width:60px;height:50px;float:left;background:#FF00FF;">
D
</div>
<div style="width:60px;height:250px;float:left;background:#FF9900;">
E
</div>
</div>
</div>
<div style="width:100px;height:300px;float:left;background:#ff0000;">
A
</div>
<div style="width:60px;height:300px;float:left;">
<div style="width:60px;height:150px;float:left;background:#66FF00;">
B
</div>
<div style="width:60px;height:150px;float:left;background:#3300FF;">
C
</div>
</div>
<div style="width:120px;height:300px;float:left;">
<div style="width:60px;height:50px;float:left;background:#FF00FF;">
D
</div>
<div style="width:60px;height:250px;float:left;background:#FF9900;">
E
</div>
</div>
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
以经以好多人写了。其实关键就是一点，用css控制DIV的长宽就可以了 宽是width: 。。px;长是height: 。。px;
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
