Question

我正在尝试使用具有不同颜色的div进行布局...所以我在页面右侧对齐3个div时遇到问题，它必须如下所示：div1在顶部，div2在div2和div3下的div3。

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;
}

Answer 1

检查jsfiddle：http://jsfiddle.net/x08j29m5/1

.a1, .a5, .a6 {clear:right;}

我补充说明：对;到a1，a5和a6，但我不确切地知道你想做什么，所以可能有一个更合适的解决方案。

Answer 2

如果我理解你的问题，那么这就是你需要的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都是正确对齐的，颜色不同。

div下的div右对齐

2 个答案: