CSS：如何实现 - 将两个元素并排放置并且没有第三个父容器并排放置？

问题：在下面的HTML的标记：CSS：如何实现 - 将两个元素并排放置并且没有第三个父容器并排放置？

<html> 
    <body> 
    <div id="div_1"></div> 
    <div id="div_2"></div> 
    </body> 
</html>

我希望同时div的（这可以是任何其他标记）为中心并位于侧由端。如何用CSS实现这一点，而不需要添加第三个父容器？

来源

2011-03-14 Shahriyar Imanov

所以，你已经解决了这个？下面的答案似乎乍一看起作用。 – thirtydot 2011-03-14 15:17:55

演示在这里：http://jsfiddle.net/Shehi/6RqWb/

以下CSS规则解决的问题：

#div_1 
{ 
    width: 200px; 
    height: 200px; 
    background-color: red; 
    position: relative; 
    left: 50%; 
    margin-left: -200px; /* = -1 * the width of element */ 
    float: left; 
    clear: none; 
} 

#div_2 
{ 
    width: 200px; 
    height: 200px; 
    background-color: blue; 
    position: relative; 
    right: 50%; 
    margin-right: -200px; /* = -1 * the width of element */ 
    float: right; 
    clear: none; 
}

来源

2011-03-14 15:15:05

+1，但我很好奇：没有;你能解释一下吗？ – Dave 2011-03-14 15:18:02

'clear：none'在这里完全没有做什么。 – thirtydot 2011-03-14 15:18:58

大声笑...我刚刚从我自己的代码中复制，所以忘了从答案中删除'clear：none;'部分...对不起:)但是，添加'clear：left'和'clear：right'到那些元素将确保他们是唯一的行中。 – 2011-03-14 15:28:25

CSS：如何实现 - 将两个元素并排放置并且没有第三个父容器并排放置？

回答

相关问题