是否可以并排放置两个div元素而不使用CSS float？

我一直发现，当我使用CSS float将两个元素并排放在一个页面上时，IE和Firefox会做出奇怪的事情让我感到惊讶。是否可以并排放置两个div元素而不使用CSS float？

是否有可能在网页上并排使用两个div而不使用CSS float？

<div id='div1'> 
<p> div1 p1 </p> 
<p> div1 p2 </p> 
</div> 
<div id='div2'> 
<p> div2 p1 </p> 
<p> div2 p2 </p> 
</div>

来源

2011-09-16 Daniel Allen Langdon

特别是，我一直有CSS浮动和边框的布局问题。在很多情况下，我希望在div上有一个边框，并且浏览器将通过一个左浮动图像绘制边框！ –

然后你需要添加一些填充到你的DIV。 –

你可以做到绝对定位。

<div id="container"> 
<div id='div1'> 
<p> div1 p1 </p> 
<p> div1 p2 </p> 
</div> 
<div id='div2'> 
<p> div2 p1 </p> 
<p> div2 p2 </p> 
</div>

样本CSS。

#container { 
position: relative; 
width: 800px; 
} 
#div1, #div2 { 
position: absolute; 
width: 400px; 
} 
#div1 { 
left: 0; 
} 
#div2 { 
left: 400px; 
}

来源

2011-09-16 17:38:07 rmlumley

谢谢！这正是我期待的答案。 –

除了浮动，你也可以给他们：display: inline-block或display: inline，不过那可能会给你的其他问题。

但请记住，'永远不要留下浮动的元素！如果你记得这一点，你的麻烦就会很少。

来源

2011-09-16 17:34:07 GolezTrol

我从来没有能够得到'display：inline'这与divs一起工作。你能提供一个HTML来展示如何做到这一点？ –

当然:) http://jsfiddle.net/GolezTrol/XkQrF/ – GolezTrol

请注意，顶部和底部的边距不适用于内联元素（这是其中一个问题）。元素确实是内联的，就像图像与文本内联一样。您可以指定左右边距以及各边的填充。正如你可以在小提琴中看到的那样，我在所有边上设置边距和填充，但是顶部边距被忽略。 – GolezTrol

DIV是块元素。你可以让他们在线是使用display:inline或display:inline-block，也可以使用绝对定位

来源

2011-09-16 17:34:13

而不是浮动，你可以设置自己的显示器display: inline;，这将使他们内联元素，而不是块级的。

来源

2011-09-16 17:34:46 cdeszaq

我从来没有能够得到这个工作。你能提供一个HTML来展示如何做到这一点？ –

尝试，

<div style="display:table"> 
    <div style="display:table-row"> 
    <div style="display:table-cell"> 
     <p> div1 p1 </p> 
     <p> div1 p2 </p> 

    </div> 
    <div style="display:table-cell"> 
     <p> div1 p1 </p> 
     <p> div1 p2 </p> 
    </div> 
    </div> 
</div>

注：这是不是在低版本的IE工作。

来源

2011-09-16 17:39:42 anglimasS

它适用于Firefox 6，但不适用于IE 7。 –

如果你有边界和宽度的问题，可以这样做：使最外面的div为一个包装（仅限宽度/高度），然后相应地在内部设置样式。只在内部添加填充元素。

请记住，边框总是带走你的宽度。所以如果你有一个200像素宽的盒子，你想要2px的边框，那么你的宽度是196px。

<div class="wrapper" style="height:200px">...do stuff here</div>

来源

2011-09-16 17:55:34

是否可以并排放置两个div元素而不使用CSS float？

回答

相关问题