把两个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旁边

回答

相关问题