12

我想让 2 个 div 并排排列在同一水平线上，没有浮动

我试过 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>

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

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

4

5 回答 5

16

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

于 2013-06-16T06:50:39.133 回答
5

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

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

于 2013-06-16T06:19:30.847 回答
4

如果你想避免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>

更新的小提琴

于 2013-06-16T18:15:04.753 回答
1

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

看到这个小提琴

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

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

于 2013-06-16T06:28:24.397 回答
0

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/

于 2013-06-16T06:28:47.850 回答