Как выровнять 2 смежных divs горизонтально WITHOUT float?

Я хочу сделать 2 divs друг с другом, чтобы их выровнять по одной горизонтальной линии БЕЗ FLOATs

Я пробовал позицию: относительный, но не повезло

См. пример ниже: 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>

Из приведенной выше ссылки мне нужно, чтобы красный ящик находился на одной строке синего квадрата без пробела ниже.

РЕДАКТИРОВАТЬ: я хочу, чтобы красный ящик оставался вне контейнера серого окна (так же, как есть) спасибо

Ответы

Ответ 1

Используйте свойства 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>

Ответ 2

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

Ответ 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>

Обновлена скрипка

Ответ 4

Если вы хотите, чтобы ваши div на одной строке без поплавков, вы можете использовать display: inline-block; и дать некоторое отрицательное значение поля вашему div, потому что встроенный блок содержит некоторое поле между ними.

Смотрите fiddle

Как ваш отредактированный вопрос я представил еще один скрипт здесь

Или вы можете просто добавить margin-top: -100px; в fiddle.

Ответ 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>

Установление позиции относительно цветных divs делает их положение относительно того, где они были бы в документе. Я думаю, что то, что вы хотели сделать, это сделать относительную позицию div, а дочерние divs расположены абсолютно внутри нее. Я предполагаю, что "с нижележащим пространством" означает "без пробела ниже"

Здесь есть учебник, который может быть полезен: http://www.barelyfitz.com/screencast/html-training/css/positioning/