Question

当我使用CSS float将两个元素并排放在页面上时，我一直发现IE和Firefox会让我感到惊讶。

是否可以在网页上并排使用两个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>

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

Answer 2

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

Answer 3

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

但请记住，'永远不要让浮动的元素不清除！'如果你记得那些，你的麻烦就会很少。

Answer 4

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

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

注意：这不适用于较低版本，即

Answer 6

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

请记住，边框总是会偏离你的宽度。因此，如果你有一个200px宽的盒子，你想要2px边框，那么你的宽度是196px。

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

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

6 个答案: