选项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
