Question

我在div中有两个div，我希望它们彼此相邻，边距为10px左右，但是它们分别出现在另一个之上。

 <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容器包装器中：

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

Answer 1

您有两种选择（选择其中一种，但不能同时选择两者）。

在float: left;和#fact

#sortbar

在display: inline-block;和#fact

#sortbar

第二个选项更好，因为您不必修复清算等，以及内联块在布局方面比左浮动更好的事实。

Answer 2

请参阅 working example 。您可以复制并粘贴此HTML＆amp; CSS并尝试一下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS styling - how to put these two div boxes adjacent</title>

<style type="text/css">
.wrapper .post {
-moz-border-radius:7px 7px 7px 7px;
border:1px solid silver;
float:left;
margin:10px;
min-height:100px;
padding:5px;
width:200px;
}

</style>
</head>

<body>
<h4>CSS styling - how to put these two div boxes adjacent</h4>

<div class="wrapper">
<div class="post">
    <div>
    Browse (<a href="http://www.google.com/ncr">Google</a>)
    </div>
    <div>
    This is a Div
    </div>
    <div>
    This is a Div
    </div>
    <div>
    This is a Div
    </div>
</div>

<div class="post">
    <div>
    Browse (<a href="http://www.wikipedia.org/">Wikepedia</a>)
    </div>
    <div>
    This is another Div
    </div>
    <div>
    <div>
    This is another Div
    </div>
    <div>
    This is another Div
    </div>
</div>
</div>

</body>
</html>

Answer 3

这样的事情应该做到......

#fact {
    width:200px; 
    float: left;
    margin: 0 10px 0 0;
} 
#sortbar {
    float: left;
}

Answer 4

添加float:left;：

#fact, #sortbar{
  float:left;
  margin-left:10px;
}

See the working demo here.

Answer 5

基本上你的#fact和#sortbar div仍然有默认的'block'显示类型，简单来说，它会将你的div放在自己的水平空间中。这里的其他答案显示了如何使用“浮动”来解决您的问题。

以下是您的一些联系：

盒子型号：http://www.w3.org/TR/CSS2/box.html
显示css属性：http://www.w3schools.com/css/pr_class_display.asp
浮动教程：http://css.maxdesign.com.au/floatutorial/

丹

CSS样式 - 如何将这两个div框放在一起

5 个答案: