把兩個DIV放在另一個DIV旁邊

我怎樣才能把紅色的&綠色的右邊的藍色部分？把兩個DIV放在另一個DIV旁邊

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <style type="text/css"> 
      #red {width:100px; height:50px; background:red;} 
      #green {width:100px; height:50px; background:green;} 
      #blue {width:100px; height:100px; background:blue;} 
     </style> 
    </head> 
    <body> 
     <div id="red"></div> 
     <div id="green"></div> 
     <div id="blue"></div> 
    </body> 
</html>

我知道如何通過添加另一個DIV作爲父母的第一和第二師做到這一點：

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <style type="text/css"> 
      #parent {float:left;} 
      #red {width:100px; height:50px; background:red;} 
      #green {width:100px; height:50px; background:green;} 
      #blue {width:100px; height:100px; background:blue; float:left;} 
     </style> 
    </head> 
    <body> 
     <div id="parent"> 
      <div id="red"></div> 
      <div id="green"></div> 
     </div> 
     <div id="blue"></div> 
    </body> 
</html>

但我不知道如果我能做到，我什麼不添加另一個HTML後元件。

在此先感謝！

來源

2012-07-09 Mori

你甚至自己嘗試什麼嗎？這似乎並不是一件很難完成的事情...... – 2012-07-09 15:33:29

更新了我的問題。 – Mori 2012-07-09 15:49:13

您可以使用float屬性使元素並排顯示。

更新：您可以通過相對定位實現此效果，請參閱下面的演示和代碼。

演示：http://jsfiddle.net/SO_AMK/Frf6w/90/

HTML：

<div id="red"></div> 
<div id="green"></div> 
<div id="blue"></div>

CSS：

#red { 
    width: 100px; 
    height: 50px; 
    background: red; 
} 

#green { 
    width: 100px; 
    height: 50px; 
    background: green; 

    float: left; 
    clear: both; 
} 

#blue { 
    width: 100px; 
    height: 100px; 
    background: blue; 

    top: -50px; 
    float: left; 
    position: relative; 
}

來源

2012-07-09 15:34:59

它不起作用，因爲它將所有這些並排放置。我只是想讓藍色的人與其他人相鄰。紅色和綠色的DIV不應該重新定位。 – Mori 2012-07-09 15:39:26

感謝您的回答！ – Mori 2012-07-10 14:35:50

沒問題，但是這隻會在你知道第一個DIV的高度 – 2012-07-10 16:35:50

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<style type="text/css"> 
#red {width:100px; height:50px; background:red;} 
#parent {float: left; } 
#green {width:100px; height:50px; background:green;} 
#blue {width:100px; height:100px; background:blue; float: left;} 
</style> 
</head> 
<body> 
<div id="parent"> 
<div id="red"></div> 
<div id="green"></div> 
</div> 
<div id="blue"></div> 
</body> 
</html>

編輯：

做了一些改動它。事情是：如果你想要紅色和綠色在彼此之下，你必須把它們放到另一個師那裏，然後把另一個師放在旁邊。你能解釋一下爲什麼你會在沒有父母的情況下想要它嗎？

來源

2012-07-09 15:34:33

它不起作用，因爲它將所有這些並排放置。我只是想讓藍色的人與其他人相鄰。紅色和綠色的DIV不應該重新定位。 – Mori 2012-07-09 15:39:02

將float:left;添加到您的所有div s。

來源

2012-07-09 15:34:33

它不起作用，因爲它將所有這些並排放置。我只是想讓藍色的人與其他人相鄰。紅色和綠色的DIV不應該重新定位。 – Mori 2012-07-09 15:38:20

使用

style="float:left"

這是什麼呢，是它使div的佔用垂直空間

來源

2012-07-09 15:35:32 OneChillDude

或者你的情況float：left; – OneChillDude 2012-07-09 15:36:27

它不起作用，因爲它將所有這些並排放置。我只是想讓藍色的人與其他人相鄰。紅色和綠色的DIV不應該重新定位。 – Mori 2012-07-09 15:41:03

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<style type="text/css"> 
body 
{ 
    max-width:200px; 
    margin:auto;  
} 
#red {width:100px; height:50px; background:red; **float:left;**} 
#green {width:100px; height:50px; background:green;**float:left;**} 
#blue {width:100px; height:100px; background:blue;**float:right;**} 
</style> 
</head> 
<body> 
    <div id="blue"></div> 
    <div id="red"></div> 
    <div id="green"></div> 
</body> 
</html>

我已經改變了車身尺寸包含在佈局研究3周的div前水平佔據儘可能多的空間，我認爲你是後。

有很多不同的方法，但這是我會去的。（好好嘗試一下的意思是它更好雖然）

希望幫助:)

來源

2012-07-09 15:37:25 Dpolehonski

它沒有幫助。不管怎麼說，還是要謝謝你！ – Mori 2012-07-09 15:39:58

使用藍色DIV下面的代碼：

style="float:left"

來源

2012-07-09 15:48:23 Susan

它沒有幫助。 – Mori 2012-07-09 15:50:45

把兩個DIV放在另一個DIV旁邊

回答

相關問題