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

Question

我想在同一行中对齐两个元素，例如： 单击此处

完整的代码

<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;
} 

另外，彼此之间不重叠。例如，如果a有一个父div和两个子div。 父级div的宽度为1000像素，子级的div的宽度为500像素，因此适合。 但是，如果我将第一个div的大小调整为600px，我希望第二个div自动调整大小，并保持在线状态，而无需更改其位置，或者第一个与第二个重叠。 在上面的小提琴中，它们对齐在同一行中，但是无论我做什么，第二个都改变其位置而不是调整大小，或者它们彼此重叠。 任何想法？

我知道必须用百分比完成，但也无法正常工作

Answer 1

width属性接受基于其父级（或如果元素的属性位置设置为“绝对”或“固定”，则其与position：relative属性最接近的父级）的百分比值。

这样您就可以将此CSS应用于孩子

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

PS：如果使用内联块，则必须确保标记之间没有空格，因此HTML必须成为

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

Answer 2

检查这个jsfiddle ，看看它是否是您想要的。 我没有使用display:inline-block因为它看起来是引起问题的原因。 如果您不介意使用浮点数，那么这就是您的答案。

编辑：

在此处检查此资源以查看/更正您的问题。

Answer 3

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

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

取下显示屏：将其全部浮动。