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

现场杰斯菲德尔

CSS:

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

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

这很简单 你可以来点硬的

.clearfix:after { content: " "; visibility: hidden; display: block; height: 0; clear: both; } #first, #second{ box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } #wrapper { width: 500px; border: 1px solid black; } #first { border: 1px solid red; float:left; width:50%; } #second { border: 1px solid green; float:left; width:50%; } <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>

or the easy way #wrapper { display: flex; border: 1px solid black; } #first { border: 1px solid red; } #second { border: 1px solid green; } <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>

还有很多其他的方法。 但我要用简单的方法。 我还想告诉你，这里有很多答案是不正确的 但我所展示的两种方法至少在HTML 5中都有效。

选项1

在两个div元素上使用float:left，并为两个div元素设置% width，总宽度之和为100%。

使用box-sizing: border-box;在浮动div元素上。值border-box强制填充和边框为宽度和高度，而不是展开填充和边框。

在<div id="wrapper">上使用clearfix清除浮动子元素，这将使包装器div缩放到正确的高度。

.clearfix:after {
   content: " "; 
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

#first, #second{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    border: 1px solid red;
    float:left;
    width:50%;
}
#second {
    border: 1px solid green;
    float:left;
    width:50%;
}

http://jsfiddle.net/dqC8t/3381/

选项2

使用位置:在一个元素上是绝对的，在另一个元素上是固定的宽度。

添加位置:相对于<div id="wrapper">元素，使子元素绝对位于<div id="wrapper">元素。

#wrapper {
    width: 500px;
    border: 1px solid black;
    position:relative;
}
#first {
    border: 1px solid red;
    width:100px;
}
#second {
    border: 1px solid green;
    position:absolute;
    top:0;
    left:100px;
    right:0;
}

http://jsfiddle.net/dqC8t/3382/

选项3

在两个div元素上使用display:inline-block，并为两个div元素设置% width，总宽度之和为100%。

再次(与float:left示例相同)使用box-sizing: border-box;在div元素上。值border-box强制填充和边框为宽度和高度，而不是展开填充和边框。

注意:内联块元素可能有空格问题，因为它受到HTML标记中的空格的影响。更多信息请访问:https://css-tricks.com/fighting-the-space-between-inline-block-elements/

#first, #second{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#wrapper {
    width: 500px;
    border: 1px solid black;
    position:relative;
}

#first {
    width:50%;
    border: 1px solid red;
    display:inline-block;
}

#second {
    width:50%;
    border: 1px solid green;
    display:inline-block;
}

http://jsfiddle.net/dqC8t/3383/

最后一个选项是使用名为flex的新显示选项，但请注意浏览器兼容性可能会起作用:

http://caniuse.com/#feat=flexbox

http://www.sketchingwithcss.com/samplechapter/cheatsheet.html

你可以使用CSS float属性将元素放在一起:

#first {
float: left;
}
#second {
float: left;
}

你需要确保包装div允许浮动的宽度，和空白等设置正确。

浮动一个或两个内部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 */
}

下面是解决方案:

#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/