web-dev-qa-db-de.com

Wie richten Sie 2 benachbarte Divs horizontal aus, OHNE schweben?

Ich möchte 2 Divs nebeneinander machen, um auf derselben horizontalen Linie ausgerichtet zu werden. WITHOUT FLOATs 

Ich habe Position versucht: relativ, aber kein Glück

Siehe das Beispiel unten: 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>

Von dem Link oben brauche ich die rote Box in der gleichen blauen Zeile ohne Leerzeichen.

EDIT: Ich möchte, dass die rote Box außerhalb der grauen Box (so wie sie ist) danke

12
Ahmed Moness

Verwenden Sie Positionseigenschaften, wenn Ihre Höhe und Breite festgelegt sind

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

5
bugwheels94

Relative mit inline-block Anzeige


#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

Der folgende Code funktioniert auch gut. Aufgrund von Kommentaren wird der Zeilenvorschub hier auskommentiert und ignoriert.

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

Warum es funktioniert block-Anzeigen nehmen die gesamte Breite ihres Containers ein, auch wenn Sie eine sehr kleine width-Einstellung für den Rest des Platzes wird als Rand verwendet (auch wenn Sie den Rand entfernen). Das ist nur wie Sie benehmen sich. inline-block-Anzeigen funktionieren ähnlich wie inline-Anzeigen Sie respektieren jedoch die padding usw., die Sie ihnen geben. Aber sie ignoriere immer noch margins (jemand korrigiert mich, wenn ich falsch liege). Gleich wie Inline-Anzeigen, wenn Sie in Ihrer HTML, .__ einen Zeilenvorschub angeben. es ist in einen kleinen Raum umgewandelt. Um das zu entfernen, habe ich hier die HTML in einer Zeile. Wenn Sie den Code einrücken, dann den div#three wird nach unten gedrückt (da Sie eine feste Breite von div#one haben, ist die Höhe nur die Option )

14
Sourabh

Wenn Sie float, position und inline-block vermeiden möchten, finden Sie hier eine Margenlösung:

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

Geige aktualisiert

3
Mr Lister

Wenn Sie möchten, dass Ihre Divs in derselben Zeile ohne Fließkommazahlen stehen, können Sie display: inline-block; verwenden und Ihrem Div einen negativen Randwert zuweisen, da Inline-Block einen gewissen Abstand zwischen ihnen hat.

Sehen Sie diese Geige

Als Ihre bearbeitete Frage habe ich eine weitere Geige eingereicht hier

Oder Sie können einfach margin-top: -100px; zu Ihrer Geige hinzufügen. 

1

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>

Wenn Sie die Position relativ zu den farbigen Divs setzen, wird ihre Position relativ zu der Position im Dokument festgelegt. Ich denke, Sie wollten die enthaltende div-Position relativ machen und die Kinder-divs absolut darin positionieren. Ich gehe davon aus, dass "mit jetzt unten Platz" bedeutet "ohne Leerraum darunter"

Es gibt hier ein Tutorial, das nützlich sein kann: http://www.barelyfitz.com/screencast/html-training/css/positioning/

0
Michael