如何在没有浮动的情况下水平对齐 2 个相邻的 div？答案

【问题标题】：How align 2 adjacent divs horizontally WITHOUT float?如何在没有浮动的情况下水平对齐 2 个相邻的 div？
【发布时间】：2023-03-23 05:00:01
【问题描述】：

我想让 2 个 div 并排排列在同一条水平线上 WITHOUT FLOATs

我尝试过 Position:relative ，但没有运气

请看下面的例子： 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>

从上面的链接，我需要红色框在蓝色框的同一行，下面没有空格..

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

【问题讨论】：

标签： html css xhtml position

【解决方案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;
	}

&lt;div id="one"&gt;&lt;div id="two"&gt;&lt;/div&gt;&lt;div id="three"&gt;&lt;/div&gt;&lt;/div&gt;

编辑

下面的代码也可以正常工作。在这里，由于 cmets，换行被注释掉并忽略了。

#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 等。但他们仍然忽略margins（如果我错了，请有人纠正我）。如同内联显示，如果您在 HTML 中在它们之间提供换行符，它被转换成一个小空间。所以要删除它，在这里我有 HTML 在一行中。如果你缩进代码然后div#three 将被向下推（因为您的宽度固定为div#one，所以高度为唯一的选择。）

【讨论】：

抱歉，不是我投了反对票，但真的感谢您的时间和精力.. 使用 inline-block 仍然无法解决我的问题，实际上我正在构建一个包含多个内容的滑块幻灯片，我想将它们与具有溢出-x：隐藏的视口并排排列，但内联块仍然没有运气:(
我刚刚发现margin 确实适用于inline-block。对于您的滑块，如果您将第一个块的margin-left 更改为-100px，那么它将隐藏并且您可以看到第二个块。使用absolute，如果您想要滑动效果，您必须更改每个块的left。 PS：我并不是说你对这个答案投了反对票，我只是在问反对票的人，不管他是谁。
很公平。但我会把它留在那里，它不会伤害任何人。如果不出意外，那么它可能会在将来对某人有所帮助。

【解决方案2】：

在高度和宽度固定时使用 Position 属性

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

【讨论】：

实际上这行得通，我试图远离绝对位置，但似乎这是最可靠的方法:(
好方法，但我不想每次都管理左属性
@EvgenyDanilenko 这是一篇旧帖子，我刚刚修改了 OP 的代码，但是如果您不想这样做，实际上不需要。编辑为百分比，因为这样更好。谢谢

【解决方案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

【讨论】：

【解决方案4】：

如果您希望您的 div 在没有浮动的情况下位于同一行，您可以使用 display: inline-block; 并为您的 div 提供一些负边距值，因为 inline-block 在它们之间包含一些边距。

看到这个fiddle

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

或者您可以简单地将margin-top: -100px; 添加到您的fiddle。

【讨论】：

我认为inline-block 元素之间没有任何边距。 Read This. 负边距技巧确实有效，但不是真正的边距。
编辑后的答案似乎还可以，但是您必须在红框之前关闭容器 div，我认为这对于动态内容不是一个好的选择（？）

【解决方案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/

【讨论】：

Relative 与 inline-block 显示

`Relative` 与 `inline-block` 显示