如何水平对齐2个相邻的div不浮动？ [英] How align 2 adjacent divs horizontally WITHOUT float?

问题描述

我想在同一水平线上排列两个div。不包含浮点

相对，但没有运气

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

从上面的链接，我需要红色框在蓝色框的同一行，

>

解决方案

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

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

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

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

See the example below : 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

解决方案

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>

这篇关于如何水平对齐2个相邻的div不浮动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！