web-dev-qa-db-fra.com

Div côte à côte sans flotteur

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

Je sais que je peux utiliser float: laissé dessus 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>
csshtmlcss-float
60
Praneel PIDIKITI

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

Notez cependant ses limites: il y a un espace supplémentaire après le premier bloc - car les deux blocs sont maintenant essentiellement des éléments inline, comme a et em, donc des espaces entre les deux comptages. Cela risquerait de casser votre mise en page et/ou de ne pas sembler agréable, et je préférerais ne pas supprimer tous les espaces entre les caractères pour des raisons de travail. 

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

98
Yi Jiang

Un div est un élément de niveau de bloc , 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 cependant les définir sur é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 un position:relative; afin que les éléments avec positionnement absolu restent relatifs à leur élément wrapper.

19
Zuul

Vous pouvez également utiliser CSS3 flexbox layout, qui est bien supporté 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 existants pour une compatibilité maximale) & En savoir plus à propos de flexbox.

2
Oriol

Je travaille actuellement sur ce problème et j’ai déjà un certain nombre de solutions . C’est bien d’avoir un site de haute qualité, que je peux aussi utiliser 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 quelques notions de base si vous démarrez un nouveau type de programmation/conception.

Donc, si les fonctions float posent des problèmes, vous pouvez essayer plusieurs options.

La première consiste à modifier l’alignement de div dans la balise div elle-même comme suit <div class="kosher" align=left> Si cela ne vous convient pas, il existe une autre option avec une marge comme celle-ci.

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

N'oubliez pas de supprimer le <div align=left>.

2
Peter Gruppelaar

Vous pouvez essayer avec marge pour droite div

margin: -200px 0 0 350px;
1
giker

Utilisez 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;
}
<div class="container">
  <div>
    <div class="left">
      LEFT
    </div>
  </div>
  <div>
    <div class="right">
      RIGHT
    </div>
  </div>
</div>

0
Mehdi