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;
}
检查的jsfiddle:http://jsfiddle.net/x08j29m5/1
.a1, .a5, .a6 {clear:right;}
我说清楚:权利;到a1,a5和a6,但我不知道你想要做什么,所以可能有更合适的解决方案。
这是工作!但现在,div a2和div a3之间有空格...如果您尝试使用代码来查看我需要执行的操作,我将不胜感激 – Valeriu92 2014-10-30 19:44:01
我希望div a3从a1的末尾开始,并且在a4的开始处结束... – Valeriu92 2014-10-30 19:46:29
我在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的都是右对齐和不同的颜色。
不能100%确定你的意思是div1,div2和div3,因为没有这些类或标识符的div – Huangism 2014-10-30 19:35:54
对于我来说很难显示我想要什么而没有图片...... div1,div2和div3只是例如。 – Valeriu92 2014-10-30 19:37:14
我想'div1,div2,div3'就像:'div a1,div a5,div a6'哇... – 2014-10-30 19:37:47