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

來源

2014-10-30 Valeriu92

不能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

檢查的jsfiddle：http://jsfiddle.net/x08j29m5/1

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

我說清楚：權利;到a1，a5和a6，但我不知道你想要做什麼，所以可能有更合適的解決方案。

來源

2014-10-30 19:37:46 nebulousGirl

這是工作！但現在，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的都是右對齊和不同的顏色。

來源

2014-10-30 19:40:27

DIV在div右對齊

回答

相關問題