Div côte à côte sans flotteur

Comment puis-je faire en sorte que div ‘left’ et ‘right’ ressemblent à des colonnes côte à côte?

Je sais que je peux utiliser float: rest sur eux et ça va marcher … mais à l’étape 5 et 6 ici http://www.barelyfitz.com/screencast…s/positioning/ le gars dit que c’est possible, Je ne peux pas le faire fonctionner si …

Code:

 div.left { background:blue; height:200px; width:300px; } div.right{ background:green; height:300px; width:100px; } .container{ background:black; height:400px; width:450px; }  
LEFT
RIGHT

La méthode habituelle pour ne pas utiliser float s est d’utiliser display: inline-block : http://www.jsfiddle.net/zygnz/1/

 .container div { display: inline-block; } 

Notez ses limitations cependant: il y a un espace supplémentaire après le premier bloc – c’est parce que les deux blocs sont maintenant essentiellement inline éléments en inline , comme a et em , donc des espaces entre les deux comptes. Cela pourrait casser votre mise en page et / ou ne pas paraître sympa, et je préférerais ne pas supprimer tous les espaces blancs entre les caractères pour des raisons de fonctionnement.

Les flotteurs sont également plus flexibles, dans la plupart des cas.

Un div est un élément de niveau bloc , ce qui signifie qu’il se comportera comme un bloc et que les blocs ne peuvent pas restr côte à côte sans être flottants. Vous pouvez cependant les définir sur des éléments en ligne avec:

 display:inline-block; 

Essaie…


Une autre façon est de les placer en utilisant:

 position:absolute; left:0; 

et / ou

 position:absolute; right:0; 

Remarque: Pour que cela fonctionne comme prévu, l’élément wrapper doit avoir une position:relative; de sorte que les éléments avec positionnement absolu restnt relatifs à leur élément wrapper.

Vous pouvez également utiliser la flexbox page CSS3 flexbox , qui est bien prise en charge de nos jours.

 .container { display: flex; flex-flow: row nowrap; justify-content: space-between; background:black; height:400px; width:450px; } .left { flex: 0 0 300px; background:blue; height:200px; } .right { flex: 0 1 100px; background:green; height:300px; } 

Voir Exemple (avec les styles hérités pour une compatibilité maximale) & En savoir plus sur la flexbox.

J’y travaille actuellement et j’ai déjà un certain nombre de solutions. C’est bien d’avoir un site de haute qualité, que je peux utiliser aussi pour ma commodité. Parce que si vous n’écrivez pas ces choses, vous finirez par oublier certaines parties. Et je peux également vous recommander d’écrire des bases si vous commencez une nouvelle programmation / conception.

Donc, si les fonctions float posent problème, vous pouvez essayer quelques options.

On modifie l’alignement div dans la balise div elle-même comme si

Si cela ne vous convient pas, alors il existe une autre option avec une telle marge.

 .leftdiv { display: inline-block; width: 40%; float: left; } .rightdiv { display: block; margin-right: 20px; margin-left: 45%; } 

N’oubliez pas de supprimer le

.

Vous pouvez essayer avec une marge pour le droit div

 margin: -200px 0 0 350px; 

Utiliser l’ display:table-cell; pour supprimer l’espace entre .Left et .Right

 div.left { background:blue; height:200px; width:300px; } div.right{ background:green; height:300px; width:100px; } .container{ background:black; height:400px; width:450px; } .container > div { display: table-cell; } 
 
LEFT
RIGHT