如何將第二個元素設置爲最右邊？

這裏是我的代碼：如何將第二個元素設置爲最右邊？

div { 
 
    float: right; 
 
    border: 1px solid; 
 
}

<div> box1 </div> 
 
<div> box2 </div>

所有我想要做的是改變box1的地方與box2。我的意思是我想把box2作爲最右邊的一個。我怎樣才能做到這一點？

注：我不想使用flex和order性能。

來源

2017-02-17 Martin AJ

添加類爲BOX2： ''

box 2

現在用css做： 'div.box2 { float：right; }' –

把它包在一個容器象下面這樣：

.container{ 
 
    float:right; 
 
} 
 
.container div { 
 
    float: left; 
 
    border: 1px solid; 
 
}

<div class="container"> 
 
<div> box1 </div> 
 
<div> box2 </div> 
 
</div>

來源

2017-02-17 08:05:09

您知道，我無法將*容器*添加到我的HTML中。 –

我不認爲如果不將它包裝到另一個div中就不可能實現。如果您仍然喜歡，您需要更改HTML格式的div順序。 – Venky

@MartinAJ你爲什麼不能把你的div包裝在另一個div中？ –

change the display of div to inline-block, those box will in the same line 

div{ 
    display: inline-block; 
}

來源

2017-02-17 08:07:38

div { 
 
    float: right; 
 
    border: 1px solid; 
 
}

<div> box2 </div> 
 
<div> box1 </div>

否則，你需要使用Flex和秩序或JavaScript。 $（'＃secondDiv'）。insertBefore（'＃firstDiv'）;

來源

2017-02-17 08:08:58

哈..！真？！謝謝你的嘗試。但我在我想要的問題中明確提到*「將第二個**元素作爲最右邊的元素」*。在你的情況下，'box1'是第二個，應該是最右邊的一個。 –

嘗試在Div中添加樣式incase你不能添加類到你的CSS。

<div> box1 </div> 
    <div style="float:right; right:0"> box2 </div>

來源

2017-02-17 08:09:47 user7417866

它不起作用http://jsfiddle.net/r9n8h/571/ –

轉換順序，

box2

box1

– user7417866

nope ..！我無法更改HTML –

如果你不能改變你的HTML，你願意用純CSS做到這一點，那麼你必須在元素的位置非常有限的控制。

如果您的包裝箱不超過兩個，並且寬度固定或（可能很小），那麼這裏有一個小技巧可以幫助您。

使用CSS3 translate()交換你的元素的位置：

div { 
 
    border: 1px solid; 
 
    float: right; 
 
} 
 

 
div:nth-child(1) { 
 
    transform: translateX(-100%); 
 
} 
 

 
div:nth-child(2) { 
 
    transform: translateX(100%); 
 
}

<div> box1 </div> 
 
<div> box2 </div>

來源

2017-02-17 08:15:48

是的，它工作..但如果我想使用'transform'屬性，我可以簡單地使用'flex'屬性，並將'order'設置爲第二個元素。但是你知道，我網站的大部分用戶都使用舊版瀏覽器。這就是爲什麼我試圖避免使用CSS3屬性。 –

@MartinAJ您可以使用供應商前綴。 'transorm'屬性在IE9 +瀏覽器中有支持。 –

好的..謝謝你，upvote。你可以在你的答案中加上'-webkit-'，'-ms-'，'-moz-'代碼嗎？ –

如何將第二個元素設置爲最右邊？

回答

相關問題