2 Divs Float Right - Not a right order

我有2個DIV，綠色和紅色。格林必須出現在紅色的左邊，紅色必須一直坐在右邊。我嘗試將浮動權應用於這兩個div，結果是綠色一直到右側，紅色顯示在紅色左側。2 Divs Float Right - Not a right order

任何想法？這裏是LIVE CODE

演示

.three { 
 
    width: 100%; 
 
    border: solid 1px blue; 
 
    float: left; 
 
    height: 45px 
 
} 
 
.red { 
 
    width: 50%; 
 
    background-color: red; 
 
    height: 40px; 
 
    float: right; 
 
} 
 
.green { 
 
    width: 30%; 
 
    background-color: green; 
 
    height: 40px; 
 
    float: right; 
 
}

<body> 
 
    <div class="three"> 
 
    <div class="green"></div> 
 
    <div class="red"></div> 
 
    </div> 
 
</body>

來源

2015-09-21 abcid d

問題解決了 - 切換在標記的順序：http://jsfiddle.net/7nJp9/26/ – Adam

@PayerAhammed我想是不是與CSS的問題，DOM訂單事宜。 –

@abcid d：我已經更新了我的答案，它的工作就像你想要的一樣。 –

只是刪除所有的inline-block的floats和應用的顯示屬性值.green和.red,這樣的元素會的身邊側，同時保持自己的立場。你不需要交換元素。看到它工作！

注：您必須添加text-align: right父元素，這是.three

.three { 
 
    width: 100%; 
 
    border: solid 1px blue; 
 
    float: right; 
 
    height: 45px; 
 
    text-align: right; 
 
} 
 
.red { 
 
    width: 50%; 
 
    background-color: red; 
 
    height: 40px; 
 
    margin-right: 0!important; 
 

 
} 
 
.green { 
 
    width: 30%; 
 
    background-color: green; 
 
    height: 40px; 
 
    
 
} 
 

 
.green, .red { 
 
    display: inline-block; 
 
    position: relative; 
 
    
 

 
}

<body> 
 
    <div class="three"> 
 
    
 
    <div class="green"></div> 
 
    <div class="red"></div> 
 

 
    </div> 
 
</body>

注：您必須添加text-align: right父元素，這是。三

來源

2015-09-21 18:18:17

非常感謝各位兄弟的幫助！它現在有效。 –

但是，現在綠色和紅色是正確的順序，但紅色必須一路向右。你有什麼主意嗎？ –

非常感謝你圓滑的怪胎！調整寬度將工作，但這些寬度與整個應用程序的其他元素不匹配。你有什麼主意嗎？ –

改變你的HTML標記的順序，因此紅色對準第一至右側，然後綠色對齊相對於綠色佔據的寬度。

.three { 
 
    width: 100%; 
 
    border: solid 1px blue; 
 
    float: left; 
 
    height: 45px 
 
} 
 
.red { 
 
    width: 50%; 
 
    background-color: red; 
 
    height: 40px; 
 
    float: right; 
 
} 
 
.green { 
 
    width: 30%; 
 
    background-color: green; 
 
    height: 40px; 
 
    float: right; 
 
}

<body> 
 
    <div class="three"> 
 
    <div class="red"></div> 
 
    <div class="green"></div> 
 

 
    </div> 
 
</body>

來源

2015-09-21 18:13:16

使用負片頁邊距

您可以使用負頁邊距來獲取所需的位置，而無需更改HTML元素的順序。

首先，向.green元素添加一個等於.red元素寬度的右邊距。

其次，對於.red元素，添加右邊距，其中.green和.red元素的總寬度爲負值。

.green上的右邊距爲.red元素提供了空間，.red上的負右邊距使其與.green元素一致。

.three { 
 
    width: 100%; 
 
    border: solid 1px blue; 
 
    float: left; 
 
    height: 45px 
 
} 
 
.red { 
 
    width: 60%; 
 
    background-color: red; 
 
    height: 40px; 
 
    float: right; 
 
    margin-right: -80%; /* - (width of red + width of green) */ 
 
} 
 
.green { 
 
    width: 20%; 
 
    background-color: green; 
 
    height: 40px; 
 
    float: right; 
 
    margin-right: 60%; /* width of red */ 
 
}

<div class="three"> 
 
    <div class="green"></div> 
 
    <div class="red"></div> 
 
</div>

來源

2015-09-21 18:35:13

2 Divs Float Right - Not a right order

回答

相關問題