我在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;
}
Del*_*ani 16
你有两个选择(选择一个或另一个,但不是两个).
float: left;在#fact和#sortbardisplay: inline-block;在#fact和#sortbar第二个选项更好,因为您不必修复清除等,以及内联块比左浮动更好地布局.
见这个工作示例.您可以复制并粘贴此HTML和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>