如何在同一行中對齊兩個元素，而不會重疊

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} 

取下顯示屏：將其全部浮動。