是否可以在不使用 CSS 浮动的情况下并排放置两个 div 元素？答案

【问题标题】：Is it possible to put two div elements side-by-side without using CSS float?是否可以在不使用 CSS 浮动的情况下并排放置两个 div 元素？
【发布时间】：2011-09-17 01:55:34
【问题描述】：

当我使用 CSS float 将两个元素并排放置在页面上时，我不断发现 IE 和 Firefox 会做一些奇怪的事情让我感到惊讶。

是否可以在不使用 CSS 浮动的情况下在网页上并排放置两个 div？

<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 浮动和边框的布局问题。在很多情况下，我希望在 div 周围有一个边框，而浏览器将通过一个左浮动图像来绘制边框！
然后您需要为您的 DIV 添加一些填充。

标签： html css layout

【解决方案1】：

你可以用绝对定位来做到这一点。

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

【讨论】：

谢谢！这正是我一直在寻找的答案。

【解决方案2】：

DIV 是块元素。您可以使用display:inline 或display:inline-block 使它们内联，或者您可以使用绝对定位

【讨论】：

【解决方案3】：

除了float，你也可以给他们：display: inline-block 或display: inline，但这可能会给你带来其他问题。

但请记住，“永远不要让浮动元素不被清除！”如果你记住这一点，你的麻烦就会很少。

【讨论】：

我一直无法让display:inline 与 div 一起使用。你能提供一个 HTML 来展示如何做到这一点吗？
请注意，顶部和底部的边距不适用于内联元素（这是其中一个问题）。元素确实是内联的，就像图像与文本内联一样。您可以指定左右边距，以及所有边的填充。正如您在小提琴中看到的那样，我设置了所有边的边距和填充，但顶部边距被忽略了。

【解决方案4】：

您可以将它们的显示设置为display: inline;，而不是浮动，这将使它们成为内联元素而不是块级元素。

【讨论】：

我一直无法让它工作。你能提供一个 HTML 来展示如何做到这一点吗？

【解决方案5】：

试试，

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

注意：这在较低版本中不起作用，即。

【讨论】：

【解决方案6】：

如果您在边框和宽度方面遇到问题，请执行以下操作：将最外面的 div 设置为包装器（仅宽度/高度），然后在内部设置相应的样式。只为内部的元素添加填充。

请记住，边框总是会占用您的宽度。所以如果你有一个 200px 宽的盒子并且你想要 2px 的边框，那么你的宽度就是 196px。

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

【讨论】：