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自动调整大小，并保持内联，而不改变其位置，或者第一个重叠第二个div。在上面的小提琴中，它们在同一行中对齐，但无论我做什么，第二个改变他的位置而不是重新调整大小，或者它们彼此重叠。有什么想法吗？

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

Answer 1

width属性接受百分比值，基于其父级（或其最近的父级，位置为：relative属性，如果元素的属性位置设置为“absolute”或“fixed”）。

所以你可以将这个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，因为它看起来是导致问题的原因。如果您不介意使用花车，那么这就是您的答案。

修改

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

Answer 3

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

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

取下显示器：向左漂浮。

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

3 个答案: