我试图只使用不同颜色的div进行布局。。。因此,我在对齐页面右侧的3个div时遇到了问题,它必须是这样的:div1在顶部,div2在div1下,div3在div2下。
div a1
div a5
div a6
这是我的html代码:
<HTML>
<HEAD>
<TITLE>DIV</TITLE>
</HEAD>
<BODY>
<link rel="stylesheet" href="coloursCSS.css" type="text/css">
<div class="a2">two</div>
<div class="a1">one</div>
<div class="a5">five</div>
<div class="a6">six</div>
<div class="VerticalSpace"></div>
<div class="a3">three</div>
<div class="HorizontalSpace"></div>
<div class="a4">four</div>
</BODY>
</HTML>
和CSS代码:
.a1, .a2, .a3, .a4, .a5, .a6
{
border: 4px solid;
}
.VerticalSpace, .HorizontalSpace
{
border: 0px;
float: left;
}
.a2
{
height: 250px;
float: left;
background-color:red;
width: 100%;
}
.a3
{
height: 100%;
float: left;
width: 20%;
background-color: #eeeeee;
}
.a4
{
height: 100px;
float: left;
width: 100%;
background-color: red;
}
.a1
{
height: 20%;
width: 23%;
float: right;
background-color:blue;
}
.a5
{
height: 20%;
width: 23%;
float: right;
background-color: yellow;
position:relative;
}
.a6
{
height:20%;
width: 23%;
float: right;
background-color: green;
}
检查jsfiddle:http://jsfiddle.net/x08j29m5/1
.a1, .a5, .a6 {clear:right;}
我加了一句清楚的话:对;到a1、a5和a6,但我不知道你到底想做什么,所以可能有一个更合适的解决方案。
如果我正确理解你的问题,那么这里是你需要的html。。。
<HTML>
<HEAD>
<TITLE>DIV</TITLE>
</HEAD>
<BODY>
<link rel="stylesheet" href="coloursCSS.css" type="text/css">
<div class="a1">one</div>
<div class="a5">five</div>
<div class="a6">six</div>
</BODY>
这三个div都是右对齐的,并且是不同的颜色。