CSS样式 - 如何把这两个div框相邻

我有一个div内有两个div，我希望它们两个相邻，边距为10px左右，将它们分开，但相反它们显示为一个在另一个之上。CSS样式 - 如何把这两个div框相邻

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

感谢您的任何援助。

来源

2010-08-22 David Willis

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

设置float: left;两个#fact和#sortbar
设置display: inline-block;两个#fact和#sortbar

第二个选项是更好，因为你没有固定的清算和等，以及内联块在布局方面的效果要好于浮动效果。

来源

2010-08-22 09:53:32

感谢，在线工作完美 – 2010-08-22 10:27:49

像这样的东西应该做...

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

来源

2010-08-22 09:52:31 realshadow

添加float:left;：

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

See the working demo here.

来源

2010-08-22 09:53:18 Sarfraz

本质上你的＃事件和#sortbar divs仍然有默认的“块”显示类型，简单来说，它会把你的div放在它们自己的水平空间中。这里的其他答案显示了如何使用“float”来解决您的问题。

下面是一些连锁为您：

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

丹

来源

2010-08-22 09:56:59

看到这个working example。您可以复制并通过此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>

来源

2010-08-22 10:14:51

CSS样式 - 如何把这两个div框相邻

回答

相关问题