CSS 样式 - 如何将这两个 div 框相邻
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3540976/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS styling - how to put these two div boxes adjacent
提问by David Willis
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，我希望它们彼此相邻，边距为 10px 左右，但它们却一个在另一个之上。
<div>
<div class="post" id="fact">
</div>
<div class="post" id="sortbar">
</div>
</div>
Here is my styling:
这是我的造型：
#fact{width:200px; margin-left:auto; margin-right:auto;} #sortbar{margin-left:auto; margin-right:auto;}
The whole code is within a div container wrapper with these properties:
整个代码位于具有以下属性的 div 容器包装器中：
#wrapper {
float:left;
margin-top:10px;
width:728px;
}
回答by Delan Azabani
You have two options (choose one or the other but not both).
您有两种选择（选择其中之一，但不能同时选择两者）。
- set
float: left;on both#factand#sortbar - set
display: inline-block;on both#factand#sortbar
- 设置
float: left;在#fact和#sortbar - 设置
display: inline-block;在#fact和#sortbar
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.
第二个选项更好，因为您不必修复清除等问题，以及内联块在布局方面比左浮动更好的事实。
回答by Angkor Wat
See this working example. You can copy and paste this HTML & CSS and try it out.
请参阅此工作示例。您可以复制并粘贴此 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>
回答by realshadow
Something like this should do it...
这样的事情应该这样做......
#fact {
width:200px;
float: left;
margin: 0 10px 0 0;
}
#sortbar {
float: left;
}
回答by Sarfraz
Add float:left;:
添加float:left;：
#fact, #sortbar{
float:left;
margin-left:10px;
}
回答by Dan Kendall
Essentially your #fact and #sortbar divs still have the default 'block' display type which, in simple terms, will put your divs in their own horizontal space. The other answers here show how to use "float" to solve your issue.
本质上，您的 #fact 和 #sortbar div 仍然具有默认的“块”显示类型，简单来说，它将把您的 div 放在它们自己的水平空间中。此处的其他答案显示了如何使用“浮动”来解决您的问题。
Here's some linkage for you:
这里有一些链接给你：
box model: http://www.w3.org/TR/CSS2/box.html
display css property: http://www.w3schools.com/css/pr_class_display.asp
float tutorial: http://css.maxdesign.com.au/floatutorial/
盒模型：http://www.w3.org/TR/CSS2/box.html
显示CSS属性：http://www.w3schools.com/css/pr_class_display.asp
浮动教程：HTTP：//css.maxdesign。 com.au/floatutorial/
Dan
担
