html实现5个div围成一个正方形，最后一个不能正常排列
<!doctypehtml><html><head><metacharset="utf-8"><title>无标题文档</title><styletype="text/c...
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style type="text/css">#out_div{ height:300px; width:300px; border:1px solid blue;}.divall{ float:left; text-align:center;}#div1,#div4{ width:100px; height:200px; background:#FF3;}#div2,#div5{ width:200px; height:100px; background:#F90;}#div3{ width:100px; height:100px; background:red;}</style></head><body><div id="out_div"> <div id="div1" class="divall">1</div> <div id="div2" class="divall">2</div> <div id="div3" class="divall">3</div> <div id="div4" class="divall">4</div> <div id="div5" class="divall">5</div></div></body></html>
求解啊 展开
求解啊 展开
4个回答
展开全部
把代码改一下：
无标题文档.html 文件代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五个div围成一个正方形</title>
<link rel="stylesheet" href="fiveDic.css">
</head>
<body>
<div id="out_div">
<div id="div1" class="divall">1</div>
<div id="div2" class="divall">2</div>
<div id="div3" class="divall">3</div>
<div id="div4">4</div> <!-- 去掉#div4的class -->
<div id="div5" class="divall">5</div>
</div>
</body>
</html>
fiveDic.css 文件代码如下：
#out_div{
height: 300px;
width: 300px;
border: 1px solid blue;
}
.divall{
float: left;
text-align: center;
}
#div1{
width: 100px;
height: 200px;
background: #FF3;
}
#div3{
width: 100px;
height: 100px;
background: red;
}
#div4{
width: 100px;
height: 200px;
background: #FF3;
float: right; /* 把#div4改为float:right; */
}
#div2, #div5 {
width: 200px;
height: 100px;
background: #F90;
}另一个土办法是用定位 abusolute 或者 relative
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
朋友，理论上确实出现这样的结果，4和5如果交换一下位置可能会好一点，但是5（也就是原来的4）的位置应该还是要加负的margin-top值，
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#out_div{
height:300px;
width:300px;
border:1px solid blue;
}
.divall{
float:left;
text-align:center;
}
#div1,#div4{
width:100px;
height:200px;
background:#FF3;
}
#div2,#div5{
width:200px;
height:100px;
background:#F90;
}
#div3{
width:100px;
height:100px;
background:red;
}
</style>
</head>
<body>
<div id="out_div">
<div id="div1" class="divall">1</div>
<div id="div2" class="divall">2</div>
<div id="div3" class="divall">3</div>
<div id="div4" class="divall" style="float:right;">4</div>
<div id="div5" class="divall" style="float:left;">5</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#out_div{
height:300px;
width:300px;
border:1px solid blue;
}
.divall{
float:left;
text-align:center;
}
#div1,#div4{
width:100px;
height:200px;
background:#FF3;
}
#div2,#div5{
width:200px;
height:100px;
background:#F90;
}
#div3{
width:100px;
height:100px;
background:red;
}
</style>
</head>
<body>
<div id="out_div">
<div id="div1" class="divall">1</div>
<div id="div2" class="divall">2</div>
<div id="div3" class="divall">3</div>
<div id="div4" class="divall" style="float:right;">4</div>
<div id="div5" class="divall" style="float:left;">5</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
加一个样式即可
#div5{margin-top:-100px}
#div5{margin-top:-100px}
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
