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

Question 1

<!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?

Question 2

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 .

Question 3

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

Question 4

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>

Question 5

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>

Question 6

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.

Question 7

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

Question 8

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

Question 9

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;

Question 10

ajouter float: gauche; aux deux balises div.

div {
  float: left;
}

Développer l'extrait