div下的div右对齐答案

【问题标题】：Div under div right aligneddiv下的div右对齐
【发布时间】：2014-10-31 04:11:45
【问题描述】：

我正在尝试仅使用具有不同颜色的 div 进行布局...所以我在页面右侧对齐 3 个 div 时遇到问题，它必须看起来像这样：div1 在顶部，div2 在下面div1，div2下的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;
}

【问题讨论】：

不是 100% 确定您所说的 div1、div2 和 div3 是什么意思，因为没有具有这些类或标识符的 div
没有图片我很难准确地展示我想要的东西......div1，div2和div3只是示例。
我想要div1, div2, div3 喜欢：div a1, div a5, div a6 哇...
在我的例子中，我需要 div a1 在顶部，div a5 在 div a1 之下，div a6 在 a5 之下
@user3183299 我的意思是我们无法分辨哪个是 div1、div2 和 div3。在您的代码或其他内容中标记它们

标签： html css

【解决方案1】：

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

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

我添加了 clear:right;到a1、a5和a6，但我不知道你到底想做什么，所以可能有更合适的解决方案。

【讨论】：

干得好！但是现在，div a2 和 div a3 之间有一个空格...如果您尝试代码以确切了解我需要做什么，我将不胜感激
我希望 div a3 从 a1 的末尾开始，并在 a4 的开头结束...
我在 DOM 中将 a3 移到了 a2 的下方。顶部没有更多空间了。
你能告诉我该怎么做吗？
啊……我这样做了，这是逻辑 :)。非常感谢！

【解决方案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 都右对齐并且颜色不同。

【讨论】：