Deux éléments de bloc en ligne, chacun de 50% de large, ne s'emboîtent pas côte à côte sur une seule rangée

87

<!DOCTYPE html>
<html>
<head>
<title>Width issue</title>
<style type="text/css">
body {
    margin: 0;
}
#left {
    width: 50%;
    background: lightblue;
    display: inline-block;
}
#right {
    width: 50%;
    background: orange;
    display: inline-block;
}
</style>
</head>
<body>
    <div id="left">Left</div>
    <div id="right">Right</div>
</body>
</html>

JSFiddle: http://jsfiddle.net/5EcPK/

Le code ci-dessus tente de placer le div #left et le div #right, côte à côte, sur une seule ligne. Mais comme vous pouvez le voir dans l'URL JSFiddle ci-dessus, ce n'est pas le cas.

Je suis en mesure de résoudre le problème en réduisant la largeur de l'un des div à 49%. Voir http://jsfiddle.net/mUKSC/ . Mais ce n'est pas une solution idéale car un petit écart apparaît entre les deux divs.

Une autre façon de résoudre le problème consiste à faire flotter les deux div. Voir http://jsfiddle.net/VptQm/ . Cela fonctionne très bien.

Mais ma question initiale demeure. Pourquoi lorsque les deux divs sont conservés en tant qu'éléments de blocs en ligne, ils ne s'ajustent pas côte à côte?

html css Apprenant seul
la source

Réponses:

136

Lors de l'utilisation d' inline-blockéléments, il y aura toujours un whitespace problème entre ces éléments (cet espace mesure environ 4 px de large).

Donc, vos deux divs, qui ont tous deux une largeur de 50%, plus cela whitespace(~ 4px) a plus de 100% de largeur, et donc ça casse. Exemple de votre problème:

Afficher l'extrait de code

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div>
<div class="right">bar</div>

Développer l'extrait

Il existe plusieurs façons de résoudre ce problème:

1. Aucun espace entre ces éléments

Afficher l'extrait de code

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div><div class="right">bar</div>

Développer l'extrait

2. Utilisation des commentaires HTML

Afficher l'extrait de code

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div><!--
--><div class="right">bar</div>

Développer l'extrait

3. Définissez les parents font-sizesur 0, puis ajoutez de la valeur aux inline-blockéléments

Afficher l'extrait de code

body{
  margin: 0; /* removing the default body margin */
}

.parent{
  font-size: 0;  /* parent value */
}

.parent > div{
  display: inline-block;
  width: 50%;
  font-size: 16px; /* some value */
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="parent">
  <div class="left">foo</div>
  <div class="right">bar</div>
</div>

Développer l'extrait

4. Utiliser une marge négative entre eux ( pas préférable )

Afficher l'extrait de code

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
  margin-right: -4px; /* negative margin */
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div>
<div class="right">bar</div>

Développer l'extrait

5. Abaissement de l'angle de fermeture

Afficher l'extrait de code

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div
><div class="right">bar</div>

<hr>

<div class="left">foo</div><div class="right">
bar</div>

Développer l'extrait

6. Ignorer certaines balises de fermeture HTML (merci @thirtydot pour la référence )

Afficher l'extrait de code

body{
  margin: 0; /* removing the default body margin */
}

ul{
  margin: 0; /* removing the default ul margin */
  padding: 0; /* removing the default ul padding */
}

li{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<ul>
  <li class="left">foo
  <li class="right">bar
</ul>

Développer l'extrait

Références:

Comme @ MarcosPérezGude dit , la meilleure façon est d'utiliser rem, et ajouter une certaine valeur par défaut font-sizesur l' htmlétiquette (comme dans HTML5Boilerplate ). Exemple:

html{
    font-size: 1em;
}

.ib-parent{             /* ib -> inline-block */
    font-size: 0;
}

.ib-child{
    display: inline-block;
    font-size: 1rem;
}

Mise à jour : comme nous sommes près de 2018., utilisez flexbox ou encore mieux - disposition en grille CSS .

Vucko
la source

3

@hoosierEE ce n'est pas un sens. L'espace entre les éléments est correct, c'est parce que les éléments de bloc en ligne se positionneront sur la ligne de texte. Si vous mettez un espace dans une ligne, il y aura un espace. Le comportement est donc correct, même si vous pensez que c'est un problème (comme Vucko l'appelle mal).

Marcos Pérez Gude

2

Je suis d'accord avec @ MarcosPérezGude, ce comportement est correct. Comme vous pouvez le voir dans mon article, il existe plusieurs façons de supprimer cet espace (j'utilise moi-même des commentaires HTML pour supprimer l'espace blanc). Mais si vous l' esprit que l' espace blanc, vous pouvez toujours utiliser flexbox, table/table-row/table-cellou l' utilisation float.

Vucko

2

J'utilise parfaitement les blocs en ligne. Mon approche normale est parent { font-size:0; } child {font-size: 1rem; }. Avec rems, c'est maintenant le plus simple

Marcos Pérez Gude

c'est un peu ennuyeux que les onglets soient toujours analysés comme des espaces. Je n'ai jamais vu cela avant d'abandonner la balise de fermeture, est-ce que cela a une instabilité ou des effets secondaires?

MintWelsh

Assurez border- vous également qu'il est éteint. Cela peut ajouter de l'espace si vous faites flotter les div.

evolross

22

la bonne réponse en css3 est:

white-space: nowrap;

dans le nœud parent, et:

white-space: normal;
vertical-align: top;

en div (ou autre) à 50%

exemple: http://jsfiddle.net/YpTMh/19/

ÉDITER:

il y a un autre moyen avec:

font-size: 0;

pour le nœud parent et le remplacer dans le nœud enfant

Matrice
la source

7

C'est parce que l'espace entre vos deux divs est interprété comme un espace. Si vous mettez vos <div>balises en ligne comme indiqué ci-dessous, le problème est corrigé :

<div id="left"></div><div id="right"></div>

Dan
la source

4

Parce qu'il y a un espace entre les éléments. Si vous supprimez tous les espaces, ils s'adapteront .

<div id="left">Left</div><div id="right">Right</div>

Michiel van Oosterhout
la source

4

Soit les faire bloquer au lieu de bloquer en ligne. Cela rendra les div en ignorant les espaces entre eux.

display:block;

ou supprimer l'espace entre les balises

<div id='left'></div><div id='right'></div>

ou ajouter

margin: -1en;

à l'un des divs afin d'atténuer l'espace occupé par un seul espace rendu.

Vittore
la source

2

Veuillez vérifier le code ci-dessous:

body {
    margin: 0;
}
#left {
    width: 50%;
    background: lightblue;
    display: inline-block;
    float:left;
}
#right {
    width: 50%;
    background: orange;
    display: inline-block;
    float:left;
}

<div id="left">Left</div>
<div id="right">Right</div>

Développer l'extrait

Vaneet Thakur
la source

2

Exemple Flexbox - cela serait utilisé pour la classe parente contenant les deux éléments côte à côte.

.parentclass {
  display: flex;
  justify-content: center;
  align-items: center; 
}

Tiré de Centrage vertical d'un div à l'intérieur d'un autre div

nbixler
la source

1

Cela peut être fait en ajoutant l'affichage css: inline au div qui contient les éléments en ligne.

Tout en supprimant l'espace blanc en utilisant une marge avec une valeur négative, il devient nécessaire de l'ajouter à cet élément particulier. Comme l'ajouter à une classe affectera les endroits où cette classe a été utilisée.

Il serait donc plus sûr d'utiliser display: inline;

Vish
la source

0

ajouter float: gauche; aux deux balises div.

div {
  float: left;
}

Développer l'extrait

Tatenda
la source