CSS样式 - 如何把这两个div框相邻 [英] CSS styling - how to put these two div boxes adjacent

问题描述

我有一个div里面有两个div，我想要它们彼此相邻，边距为10px左右，但是它们分开，而是一个在另一个之上。

I have two divs inside a div, I want them both adjacent to each other with a margin of 10px or so separating them but instead they appear one above the other.

 <div>
     <div class="post" id="fact">
    </div>

    <div class="post" id="sortbar">
    </div>

 </div>   

以下是我的样式：

 #fact{width:200px; margin-left:auto; margin-right:auto;} #sortbar{margin-left:auto; margin-right:auto;}

整个代码在一个div容器包装器中，具有以下属性： / p>

The whole code is within a div container wrapper with these properties:

 #wrapper {
 float:left;
margin-top:10px;
 width:728px;
 }

感谢任何帮助。

推荐答案

您有两个选项（选择一个或另一个，但不能同时选择两个）。

You have two options (choose one or the other but not both).

• set float：left; 在 #fact 和 #sortbar #fact 上的


• 设置 display：inline-block; 和 #sortbar

• set float: left; on both #fact and #sortbar
• set display: inline-block; on both #fact and #sortbar

第二个选项更好，以修复清除等，以及inline-block的工作方式比左边浮动好多了。

The second option is better because you don't have to fix the clearing and such, as well as the fact that inline-block works a lot better layout-wise than left floating.

这篇关于CSS样式 - 如何把这两个div框相邻的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！