最後一個div浮球在下第一個

這是我的HTML最後一個div浮球在下第一個

<div class="one">...</div> 
<div class="two">...</div> 
<div class="three">...</div> 
<div class="four">...</div> 
<div class="five">...</div>

我如何只使用CSS得到這個形象？我想用float，但我怎麼能得到第一個旁邊的第五個div？更改HTML不是（！）一個選項。

enter image description here

來源

2011-12-09 Michiel

我的第一個評論會是那個類名不能開頭的一個數字，所以我真的希望你可以爲此編輯HTML。要回答你的問題，忽略這個事實，如果每個元素都有一個類，這很簡單。只是這樣做：

div { 
    float: left; 
    width: 200px; 
    height: 100px; 
    border: 1px solid #000; 
    display: block; 
    clear: left; } 
div.5 { 
    float: none; 
    clear: none; 
    display: inline-block; }

前瞻：http://jsfiddle.net/Wexcode/mvwSL/

來源

2011-12-09 08:34:39 Wex

謝謝，這是解決方案！ – Michiel

請接受這個解決方案，如果它是你感覺回答你的問題的那個:) – Wex

我會，我確信它可以100％工作:-)仍在測試和微調！ – Michiel

您有幾種選擇：

浮球負邊距：

.five{float:right; margin-top:-500px;}

Demo

或者利潤率只有

.five{margin:-500px 0 0 200px;}

Demo

或相對定位：

.five{position:relative; top:-500px; left:200px;}

Demo

或絕對定位：

.five{position:absolute; top:0; right:0;}

（確保容器設置爲position:relative;）

Demo

來源

2011-12-09 08:32:20 bookcasey

首先，數值類是無效的。你很擰，如果你不能改變他們......通過適當的班，解決方案可能是：

CSS：

div {float:left;clear:left} 
div.c5 {float:right}

jQuery的

$("div.c5").insertBefore("div.c1")

看到這個fiddle

來源

2011-12-09 08:32:44 solendil

是的，我知道。這只是爲了快速打字！謝謝你的回答。我可以添加CSS類，但不能更改當前值。 – Michiel

嘗試以下：它可以作爲你的要求，但水平，你要垂直。但相信它可以幫助你。

<html> 
    <head> 
    <style type="text/css"> 
     #outer { 
     width: 500px; 
     margin: 300px 0 0 10px; 

     } 
     .inner { 
     background-color: red; 
     width: 100px; 
     height: 100px; 
     float: left; 
     margin: 10px; 

     } 
    </style> 
    </head> 

    <body> 
    <div id="outer"> 
     <div class="inner">1</div> 
     <div class="inner">2</div> 
     <div class="inner">3</div> 
     <div class="inner">4</div> 
     <div class="inner">5</div> 
     <div class="inner">6</div> 
     <div class="inner">7</div> 
    </div> 
    </body> 
    </html>

來源

2011-12-09 08:45:40

爲什麼'rotate'語句？ – Michiel

你可以刪除它。這裏沒關係 – 2011-12-09 08:53:35

好的，但你爲什麼把它放在那裏？ – Michiel

@Wex

div:last-child{ 
    float: none; 
    clear: none; 
    display: inline-block; 
}

來源

2011-12-09 11:58:19 Yusuf

中刪除與Wex的答案有什麼不同？ – Michiel

最後一個div浮球在下第一個

回答

相關問題