css：如何根據div中的第二個div浮動div

我需要將此藍色div放在紅色div旁邊，而黃色div必須保留在原位。css：如何根據div中的第二個div浮動div

http://jsfiddle.net/pCGxe/

如何做到這一點，而無需使用類似position:absolute, float:none - 等等......討厭的黑客？

來源

2011-04-01 WraithLux

爲什麼你覺得絕對定位是一個討厭的黑客？ – 2011-04-01 12:27:51

，因爲我的網站比這個小例子複雜得多。內容是動態的，它不會工作。 – WraithLux 2011-04-01 12:30:06

將margin-top: -50px添加到大div。

或者，您也可以將小div包裹在另一個div中，並將其浮動。取決於情況。

和position: absolute,float: none根本不是討厭的黑客，他們是網站建設者的最好朋友:)。

來源

2011-04-01 12:30:53 kapa

我無法使用margin-top：-50px;在這些「3個例子div」之前實際上有更多的div，它們是動態的。我想我應該提到那個，對不起。 – WraithLux 2011-04-04 08:52:51

即使在這種情況下，此解決方案仍可能工作。如果你可以給我一個jsFiddle，顯示你實際想要的東西，我可能會更好地幫助你。 – kapa 2011-04-04 09:07:12

我用不同的技術搞砸了。我離開時要麼使用這個邊緣CSS「黑客」（抱歉，但是，它是），或使用jQuery來操縱HTML。我選擇使用負邊距。所以我會將其標記爲答案。 – WraithLux 2011-04-04 11:00:00

CSS

#container{ 
    width:500px; 
    height:400px; 
    border:1px dashed black; 
} 
#div1{ 
    width:50px; 
    height:50px; 
    background:red; 
} 
#div2{ 
    width:50px; 
    height:100px; 
    float:left; 
    background:yellow; 
} 
#bigdiv{ 
    width:350px; 
    height:250px; 
    float:right; 
    background:blue; 
    margin-right: 100px; 
}

HTML

<div id="container"> 
    <div id="bigdiv"></div> 
    <div id="div1"></div> 
    <div id="div2"></div> 
</div>

來源

2011-04-01 12:32:08

如果'container'的大小稍後改變怎麼辦？那麼'margin-right'也需要改變？或者更有趣的是，如果'容器'的寬度不固定呢？ – Bazzz 2011-04-01 12:38:41

您更改了HTML。我不能在div1和div2之前有「bigdiv」。 – WraithLux 2011-04-04 10:02:39

不要添加與固定電話號碼，特別是無固定負數的利潤空間。如果您的網站的設計或div的大小稍後發生變化，該怎麼辦？您需要更改所有這些邊距。

在這裏你去： http://jsfiddle.net/pCGxe/10/

HTML

<div id="container"> 
    <div id="div1and2"> 
     <div id="div1"></div> 
     <div id="div2"></div> 
    </div> 
    <div id="bigdiv"></div> 
</div>

CSS

#div1and2 { 
    float: left; 
}

來源

2011-04-01 12:32:59 Bazzz

..但他正在尋找一個純粹的CSS解決方案？ – 2011-04-01 12:43:09

@Richard，我認爲這是基於這樣一個事實，即在 – Bazzz 2011-04-01 12:44:04

這個問題上只有一個'css'標記，但是您更改了HTML ...然而，我同意您的觀點。 – 2011-04-01 12:50:58

在我看來絕對定位是不是黑客攻擊，而大多數開發商只是不知道如何使用它 - 這幾乎就像神祕的CSS知識：P

所以這裏有一個如何絕對定位可以用來解決這個特定問題的例子：

#container{ 
    width:500px; 
    height:400px; 
    border:1px dashed black; 
    position:relative; 
    top:0px; 
    left:0px; 
} 
#div1{ 
    width:50px; 
    height:50px; 
    background:red; 
} 
#div2{ 
    width:50px; 
    height:100px; 
    background:yellow; 
} 
#bigdiv{ 
    width:350px; 
    height:250px; 
    position:absolute; 
    left:50px; 
    top:0px; 
    background:blue; 
}

爲了絕對定位正常工作，絕對定位元素的祖先元素之一（在這種情況下#bigdiv）必須非靜態地定位。 position:static是任何元素的默認定位，所以如果我想要#bigdiv爲50px遠離#container的左側，#container必須具有非靜態定位;因此position:relative;。

爲了記錄在案，float:none是絕對不是黑客攻擊：P

來源

2011-04-01 12:50:08

從理論上講，這似乎是一個很好的方式來實現這一點。但是，再次，使用position：絕對接近包含動態數據的div在我看來並不是一個好主意。 – WraithLux 2011-04-04 08:55:43

css：如何根據div中的第二個div浮動div

回答

相關問題