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

How align 2 adjacent divs horizontally WITHOUT float?

提问by Ahmed Moness

I want to make 2 divs beside each other to be aligned on the same horizontal line WITHOUT FLOATs

我想让 2 个 div 彼此并排在同一条水平线上对齐而没有浮动

I've tried Position:relative ,, but no luck

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

See the example below : http://jsfiddle.net/XVzLK

请参阅下面的示例：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>

From the link above, I need the red box to be on the same line of blue box with no space below ..

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

EDIT: I want the red box to stay outside the container gray box (just as it is) thanks

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

采纳答案by bugwheels94

Use Position properties when your height and width are fixed

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

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

回答by Sourabh

Relativewith inline-blockdisplay

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>

EDIT

编辑

The code below also works fine. Here, because of comments, the line feed is commented out and ignored.

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

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

Why it worksblockdisplays take the whole width of their container, even if you set a very small width, rest of the space will be taken as margin (even if you remove margin). That's just how they behave. inline-blockdisplays work much like inlinedisplays except that they do respect the paddingetc you give them. But they still ignore margins (someone correct me if I am wrong). Same as inline displays, if you give a line-feed between them in your HTML, it's converted to a small space. So to remove that, Here I have the HTML in a single line. If you indent the code then the div#threewill be pushed down (as you have fixed width of div#oneso height is only option.)

为什么它的工作原理block显示占用其容器的整个宽度，即使您设置了一个非常小的width，其余的空间也将被视为边距（即使您删除了边距）。这就是他们的行为方式。inline-block显示器的工作方式与inline显示器非常相似，只是它们确实尊重padding您给它们的等。但他们仍然忽略margins（如果我错了，有人会纠正我）。与内联显示相同，如果您在HTML. 所以要删除它，我在这里将 HTML 放在一行中。如果您缩进代码，那么代码div#three将被向下推（因为您有固定的宽度，div#one所以高度是唯一的选择。）

回答by Mr Lister

If you want to avoid float, positionand inline-block, here's a margin-only solution:

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

更新的小提琴

回答by Bhojendra Rauniyar

If you want your divs on same line without floats you can use display: inline-block;and give some negative margin value to your div because inline-blockcontains some margin between them.

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

See this fiddle

看到这个小提琴

As your Edited question I have submitted another fiddle here

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

Or you could simply add margin-top: -100px;to your fiddle.

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

回答by Michael

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

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>

Setting position relative on the coloured divs makes their position relative to where they would have been in the document. I think what you wanted to do is make the containing div position relative, and the children divs positioned absolutely within it. I'm assuming that "with now space below" meant "with no space below"

在彩色 div 上设置 position relative 使它们的位置相对于它们在文档中的位置。我认为您想要做的是使包含的 div 位置相对，并且子 div 绝对位于其中。我假设“下面有空间”意味着“下面没有空间”

There is a tutorial here that may be of use: http://www.barelyfitz.com/screencast/html-training/css/positioning/

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