DIV在div右对齐

问题描述:

我想使用不同颜色的DIV进行布局......所以我在对齐页面右侧的3个DIV时遇到了问题,它必须如下所示:div1在div1之下的div2和div2之下的div3。DIV在div右对齐

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

不能100%确定你的意思是div1,div2和div3,因为没有这些类或标识符的div – Huangism 2014-10-30 19:35:54

+0

对于我来说很难显示我想要什么而没有图片...... div1,div2和div3只是例如。 – Valeriu92 2014-10-30 19:37:14

+0

我想'div1,div2,div3'就像:'div a1,div a5,div a6'哇... – 2014-10-30 19:37:47

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

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

我说清楚:权利;到a1,a5和a6,但我不知道你想要做什么,所以可能有更合适的解决方案。

+0

这是工作!但现在,div a2和div a3之间有空格...如果您尝试使用代码来查看我需要执行的操作,我将不胜感激 – Valeriu92 2014-10-30 19:44:01

+0

我希望div a3从a1的末尾开始,并且在a4的开始处结束... – Valeriu92 2014-10-30 19:46:29

+0

我在a2的下方移动了a3。顶部没有更多的空间。 – nebulousGirl 2014-10-30 20:12:53

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