Div côte à côte sans flotteur

Question

Comment faire en sorte que div "gauche" et "droite" ressemblent à des colonnes côte à côte?

Je sais que je peux utiliser float: laissé sur eux et cela fonctionnera ... mais aux étapes 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:

 <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 pas floats est d'utiliser display: inline-block: http://www.jsfiddle.net/zygnz/1/

.container div {
  display: inline-block;
}

Note de ses limites: 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, de sorte que l'espace entre les deux chefs d'accusation. Cela pourrait briser votre mise en page et/ou pas agréables à regarder, et je préfère ne pas foirer tous les espacements entre les caractères pour l'amour de ce travail.

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

Answer 2

Un div est un élément de niveau bloc, ce qui signifie que va se comporter comme un bloc, et les blocs peuvent pas rester côte à côte sans être évoquée. Vous pouvez cependant régler à des éléments en ligne avec:

display:inline-block;

Lui donner un essai...

---

Une autre façon est de les placer à l'aide de:

position:absolute;
left:0;

et/ou

position:absolute;
right:0;

Note: Pour que cela fonctionne comme prévu, le wrapper élément doit avoir un position:relative; , de sorte que les éléments à positionnement absolu séjour par rapport à leur élément wrapper.

Answer 3

Vous pouvez essayer avec marge pour droite div

 margin: -200px 0 0 350px;