html - 如何在同一行中对齐两个元素而不重叠

Question

我想在同一行中对齐两个元素，如下所示:click here

完整代码

<div id="element1">  element 1 markup </div> 
<div id="element2">  element 2 markup </div> 

CSS

#element1 {
    display:inline-block;
    margin-right:10px; 
    width:200px; 
    background-color:red;
} 
#element2 {
     display:inline-block; 
     width:200px;
     background-color:red;
} 

此外，没有相互重叠。例如，如果一个有一个父 div 和两个子 div。父 div 有 1000px 宽度，每个子元素有 500px，所以它们适合。但是，如果我将第一个 div 的大小调整为 600px，我希望第二个 div 自动调整大小，并保持内联，而不改变他的位置，或者第一个与第二个重叠。在上面的 fiddle 中，它们排在同一条线上，但不管我做什么，第二个改变他的位置而不是调整大小，或者它们相互重叠。有什么想法吗？

我知道它必须用百分比来完成，但也不起作用

Answer 1

http://jsfiddle.net/a4aME/507/

#element1 {width:50%; background-color:red;float:left} 
#element2 {width:50%; background-color:red;float:left} 

取下显示器:然后将其全部向左浮动。