如何水平对齐2个相邻的div而不浮动？

Question

我想在彼此旁边制作两个div，以便在同一水平线上对齐没有FLOAT

我尝试过位置：相对，但没有运气

请参阅以下示例： http://jsfiddle.net/XVzLK

<div style="width:200px;height:100px;background:#ccc;"> 
<div style="background:Blue; float:left; width:100px; height:100px;"></div> 
<div style="background:red; float:left; margin-left:100px; width:100px; height:100px;"></div>
</div>

从上面的链接中，我需要红色框位于蓝色方框的同一行，下方没有空格。

编辑：我希望红色框留在容器灰色框之外（就像它一样）谢谢

Answer 1

Relative inline-block显示

---

#one {
		width: 200px;
		background: #ccc;
	}

	#two {
		display: inline-block;
		background: blue;
		position: relative;
		left: 0;
		width: 100px; height: 100px;
	}

	#three {
		display: inline-block;
		background: red;
		position: relative;
		left: 0;
		width: 100px; height: 100px;
	}

<div id="one"><div id="two"></div><div id="three"></div></div>

修改

以下代码也可以正常使用。在这里，由于注释，换行符被注释掉并被忽略。

#one {
		width: 200px;
		background: #ccc;
	}

	#two {
		display: inline-block;
		background: blue;
		position: relative;
		left: 0;
		width: 100px; height: 100px;
	}

	#three {
		display: inline-block;
		background: red;
		position: relative;
		left: 0;
		width: 100px; height: 100px;
	}

	<div id="one">
		<div id="two"></div><!--
		--><div id="three"></div>
	</div>

  

为什么会有效 block显示其容器的整个宽度，即使您设置了非常小的width，其余部分也是如此   将被视为保证金（即使您删除保证金）。那是怎么回事   他们表现得很好inline-block显示与inline显示非常相似的工作   除了他们尊重你给他们的padding等。但是他们   仍然忽略margin s（如果我错了，有人会纠正我）。与...一样   内嵌显示，如果您在HTML中为它们提供换行符，   它被转换成一个小空间。所以要删除它，我在这里   HTML在一行中。如果你缩进代码，那么div#three   将被推下（因为你有div#one的固定宽度，所以高度是   唯一的选择。）

Answer 2

高度和宽度固定时使用位置属性

<div style="width:200px;height:100px;position:relative;background:#ccc;"> 
   <div style="background:Blue; position:absolute; left:0%; width:50%; height:100%;">
   </div> 
   <div style="background:red; position:absolute; left:50%; width:50%; height:100%;">
   </div>
</div>

Answer 3

如果您想避免float，position和inline-block，这里只是一个仅限于保证金的解决方案：

<div style="width:200px; background:#ccc;">
<div style="background:blue; width:100px; height:100px;"></div>
<div style="background:red; width:100px; height:100px; margin:-100px 0 0 100px;"></div>
</div>

Updated fiddle

Answer 4

如果你想让你的div在没有花车的同一行上你可以使用display: inline-block;并给你的div一些负边距值，因为内联块包含它们之间的一些边距。

请参阅此fiddle

作为您编辑的问题，我提交了另一个小提琴here

或者您只需将margin-top: -100px;添加到fiddle即可。

Answer 5

http://jsfiddle.net/XVzLK/22/

<div style="width:200px;position: relative; background:#ccc;">
<div style="background:Blue; position:absolute; top:0; left: 0; width:100px;height:100px;"></div>
<div style="background:red; position:absolute; top:0; right: 0; width:100px;height:100px;"></div>
</div>

在彩色div上设置相对位置使其位置相对于文档中的位置。我认为你想要做的是使包含div位置相对，并且子div完全位于其中。我假设“现在空间低于”意味着“没有空间”

这里有一个可能有用的教程：http://www.barelyfitz.com/screencast/html-training/css/positioning/