web-dev-qa-db-fra.com

Comment aligner horizontalement 2 divs adjacentes SANS float?

Je veux faire 2 divs côte à côte pour être alignés sur la même ligne horizontale WITHOUT FLOATs 

J'ai essayé Position: relative, mais pas de chance

Voir l'exemple ci-dessous: 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>

À partir du lien ci-dessus, j'ai besoin que la zone rouge se trouve sur la même ligne que la zone bleue sans espace en dessous.

EDIT: je veux que la boîte rouge reste en dehors de la boîte grise du conteneur (telle quelle), merci

htmlcssxhtmlposition
12
Ahmed Moness

Utilisez les propriétés de position lorsque votre hauteur et votre largeur sont fixes

<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 avec inline-block affichage

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

MODIFIER

Le code ci-dessous fonctionne aussi très bien. Ici, à cause des commentaires, le saut de ligne est mis en commentaire et ignoré.

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

Pourquoi ça marcheblock les écrans prennent toute la largeur de leur conteneur, même si vous définissez une très petite width, reste de l'espace sera pris comme marge (même si vous supprimez la marge). C'est juste comment ils se comportent. Les écrans inline-block fonctionnent beaucoup comme les écrans inline sauf qu'ils respectent la padding etc. que vous leur donnez. Mais ils toujours ignorer margins (quelqu'un me corrige si je me trompe). Pareil que affichages en ligne, si vous donnez un saut de ligne entre eux dans votre HTML, c'est converti en un petit espace. Donc, pour enlever ça, j'ai le HTML en une seule ligne. Si vous indenter le code, le div#three sera abaissé (comme vous avez une largeur fixe de div#one, la hauteur est donc la seule option )

14
Sourabh

Si vous voulez éviter float, position et inline-block, voici une solution ne contenant que des marges:

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

Violon mis à jour

3
Mr Lister

Si vous voulez que vos divs soient sur la même ligne sans float, vous pouvez utiliser display: inline-block; et donner une valeur de marge négative à votre div car inline-block contient une marge entre eux.

Voir ceci violon

En tant que question modifiée, j’ai soumis un autre violon ici

Ou vous pouvez simplement ajouter margin-top: -100px; à votre violon . 

1
Bhojendra Rauniyar

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>

Définir la position relative sur les divs colorées rend leur position relative à l'endroit où elles se seraient trouvées dans le document. Je pense que ce que vous vouliez faire, c’est que la position de la division contienne soit relative, et que les divisions des enfants y soient placées de manière absolue. Je suppose que "avec maintenant l'espace en dessous" signifiait "sans espace en dessous"

Il y a ici un tutoriel qui peut être utile: http://www.barelyfitz.com/screencast/html-training/css/positioning/

0
Michael