Div下的Div右对齐



我试图只使用不同颜色的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都是右对齐的,并且是不同的颜色。

最新更新