#wrapper { width: 1200; border: 1px solid black; position: relative; float: left; } #first { width: 300px; border: 1px solid red; position: relative; float: left; } #second { border: 1px solid green; position: relative; float: left; width: 500px; } <div id="wrapper"> <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div> <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div> </div>

#wrapper { width: 1200; border: 1px solid black; position: relative; float: left; } #first { width: 300px; border: 1px solid red; position: relative; float: left; } #second { border: 1px solid green; position: relative; float: left; width: 500px; } <div id="wrapper"> <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div> <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div> </div>

有两个div，你也可以使用display属性:

#包装{ 边框:1px纯蓝色; ｝ # div1 { 显示:inline-block; 宽度:120 px; 身高:120 px; 边框:1px纯红色; ｝ # div2 { 显示:inline-block; 宽度:160 px; 身高:160 px; 边框:1px纯绿色; ｝ < div id = "包装" > <div id="div1">这两个div是</div> <div id="div2">相邻 < / div >

如果div1超过了一定的高度，则div2将被放置在底部的div1旁边。要解决这个问题，请使用vertical-align:top;div2。

#包装{ 边框:1px纯蓝色; ｝ # div1 { 显示:inline-block; 宽度:120 px; 身高:120 px; 边框:1px纯红色; ｝ # div2 { vertical-align:最高; 显示:inline-block; 宽度:160 px; 身高:160 px; 边框:1px纯绿色; ｝ < div id = "包装" > < div id = " div1 " >两个div < br / > < br / > < br / > < br / > < br / > < br / > < / div > <div id="div2">相邻 < / div >

jsFiddle为例1。

jsFiddle为例2。

下面是解决方案:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: auto; /* so the size of the wrapper is alway the size of the longest content */
}
#first {
    float: left;
    width: 300px;
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    margin: 0 0 0 302px; /* considering the border you need to use a margin so the content does not float under the first div*/
}

你的演示版本更新了;

http://jsfiddle.net/dqC8t/1/

尝试使用flexbox模型。写起来既简单又简短。

现场杰斯菲德尔

CSS:

#wrapper {
  display: flex;
  border: 1px solid black;
}
#first {
    border: 1px solid red;
}
#second {
    border: 1px solid green;
}

默认方向为行。因此，它们在#包装器中彼此对齐。 但它不支持IE9或更低版本

浮动一个或两个内部div。

浮动一个div:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* will contain if #first is longer than #second */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    overflow: hidden; /* if you don't want #second to wrap below #first */
}

或者如果你浮动两个，你需要鼓励包装器div包含两个浮动的子元素，否则它会认为它是空的，不会在它们周围设置边框

浮动两个div:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* add this to contain floated children */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    float: left; /* add this */
}