css - 如何在 CSS 中将两个 div 并排放置？

Question

我想将两个 div 并排放置，但无论我做什么，第二个 div 总是在第一个 div 之下的某个地方结束。我努力了：

div.one {
width:50%;
float:left;
}

div.two {
width:50%
float:right;
margin-left:50%;
}

和

div.one {
width:50%;
display:inline-block;
}

div.two {
width:50%;
display:inline-block;
}

Answer 1

从您的第一个示例中，尝试删除边距。

div.one {
   width:50%;
   float:left;
}

div.two {
    width:50%
    float: left;
}

Answer 2

#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}

这是一个很棒的教程的链接，它为您提供了几个定位示例：http ://www.barelyfitz.com/screencast/html-training/css/positioning

Answer 3

两者都应该是“浮动：左；”

元素必须适合 - 当有边框、边距或内边距时，“width:50%;” 可能太高了。

Answer 4

.one {
    width: 50%;
    float: left;
    background: green;
    height: 100px;
}

.two {
    width: 50%;
    float: right;
    height: 100px;
    background: red;
}

http://jsfiddle.net/qf9GD/