Div côte à côte sans flotteur

Question

Comment faire pour que div 'gauche' et 'droite' ressemblent à des colonnes côte à côte?

Je sais que je peux utiliser float: left sur eux et cela fonctionnera ... mais à l'étape 5 et 6 ici http://www.barelyfitz.com/screencast...s/positioning/ le gars dit qu'il est possible, je ne peux pas fonctionner si ...

code:

<style> 
div.left { 
    background:blue; 
    height:200px; 
    width:300px; 
} 

div.right{ 
    background:green; 
    height:300px; 
    width:100px; 
} 

.container{ 
    background:black; 
    height:400px; 
    width:450px; 
} 
</style> 

<div class="container"> 
     <div class="left"> 
      LEFT 
     </div> 
     <div class="right"> 
      RIGHT 
     </div> 
</div> 

Answer 1

La méthode habituelle lorsque vous n'utilisez float s est d'utiliser display: inline-block: http://www.jsfiddle.net/zygnz/1/

.container div { 
    display: inline-block; 
} 

Prenez note ses limites si: 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, comme a et em, car les espaces entre les deux chefs d'accusation. Cela pourrait casser votre mise en page et/ou ne pas avoir l'air sympa, et je préfèrerais ne pas enlever tous les espaces entre les caractères pour le plaisir de travailler.

Flotteurs sont également plus souples, dans la plupart des cas.

Answer 2

Vous pouvez essayer avec marge de droite div

margin: -200px 0 0 350px; 

Answer 3

Un div est un block level element, ce qui signifie qu'il se comportera comme un bloc et que les blocs ne peuvent pas rester côte à côte sans être flottants. Vous pouvez toutefois les mettre à inline elements avec:

display:inline-block; 

Lui donner un essai ...

---

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

position:absolute; 
left:0; 

et/ou

position:absolute; 
right:0; 

Note: Pour que cela fonctionne comme prévu, l'élément d'emballage doit avoir un position:relative; pour que les éléments avec séjour de positionnement absolu par rapport à leur élément d'emballage.

Answer 4

Vous pouvez également utiliser la mise en page CSS3 flexbox, qui est well supported 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; 
} 

See Example (avec des styles hérités pour compatiblité maximum) & Learn more au sujet FlexBox.

Answer 5

Je travaille actuellement sur ce point, et j'ai déjà un certain nombre de solutions. C'est agréable d'avoir un site de haute qualité, que je peux utiliser aussi pour mon confort. Parce que si vous n'écrivez pas ces choses, vous finirez par oublier certaines parties. Et je peux aussi vous recommander d'écrire quelques bases si vous commencez une nouvelle programmation/conception.

Donc, si les fonctions de flotteur causent des problèmes il y a quelques options que vous pouvez essayer.On modifie l'alignement div dans l'étiquette div comme si <div class="kosher" align=left> Si cela ne vous convient pas, alors il y a une autre option avec marge comme ça.

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

N'oubliez pas d'enlever le <div align=left>.

Answer 6

Utilisez display:table-cell; pour enlever 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; 
 
}

<div class="container"> 
 
    <div> 
 
    <div class="left"> 
 
     LEFT 
 
    </div> 
 
    </div> 
 
    <div> 
 
    <div class="right"> 
 
     RIGHT 
 
    </div> 
 
    </div> 
 
</div>