Inline-block не действует так, как предполагается

Question

Я хотел бы отобразить содержимое с помощью встроенного блока, например: IMAGE1

На самом деле я делаю это, добавляя балины в обратном направлении, но это не подходит ...

Я думал о добавлении display: inline-block, но результат хуже: IMAGE2

Вот мой index.html:

<div id="Global">
  <div id="Formation">
    <div id="columnNames">FORMATION</div>
    <div id="content">
      - <a title="Cliquez pour plus d'informations !" href="formation/esisar.html"><I>2015 - 2020</I><br>
      &emsp;<B>É</B>cole <B>S</B>upérieure d’<B>I</B>ngénieurs en <B>S</B>ystèmes <B>A</B>vancés et <B>R</B>éseaux (ESISAR)<br></a>
      - <a title="Cliquez pour plus d'informations !" href="formation/lycee.html"><I>2012 - 2015</I><br>
      &emsp;Lycée Camille Vernet - Valence - Bac S Section Européenne Allemand - Mention Bien</a>
    </div>
  </div>

  <br><br><br><br>
  <hr>


  <div id="Skills">
    <div id="columnNames">COMPETENCES</div>
    <div id="content">
      - <a title="Cliquez pour plus d'informations !" href="competences/latex.html">Maîtrise du langage de documentation scientifique LaTeX<br></a>
      - <a title="Cliquez pour plus d'informations !" href="competences/progimperative.html">Maitrise des langages de programmation impérative (C, C++, Python)<br></a>
      - <a title="Cliquez pour plus d'informations !" href="competences/objet.html">Maitrise des langages de programmation objet (C++, Python, Java)<br></a>
      - <a title="Cliquez pour plus d'informations !" href="competences/sql.html">Maîtrise du langage de requêtage SQL<br></a>
      - <a title="Cliquez pour plus d'informations !" href="competences/web.html">Notions en langages WEB (HTML, CSS et JavaScript)<br></a>
      - <a title="Cliquez pour plus d'informations !" href="competences/linux.html">Système d’exploitation LINUX (Administration et Programmation)<br></a>
      - <a title="Cliquez pour plus d'informations !" href="competences/secnumedu.html">Certification SecNumEdu ANSSI – Formation Initiale en Cybersécurité<br></a>
      - <a title="Cliquez pour plus d'informations !" href="competences/toeic.html">Anglais – TOEIC 940 points (14/12/2018) – Niveau C1<br></a>
      - <a title="Cliquez pour plus d'informations !" href="competences/allemand.html">Allemand – Niveau B1<br></a>
    </div>
  </div>
</div>

И мой .css связан с этим:

div#Global{
  padding-bottom: 8px;
  padding-left: 20px;
  padding-right: 20px;
  line-height: 30px;
}

div#Formation{
  display: inline-block;
}

div#columnNames {
    float: left;
    text-align: center;
    width: 15%;
    color: #7E97AD;
}

div#content {
    float: right;
    text-align: justify;
    width: 83%;
}

Answer 1

Добавьте width:100% с display:inline-block, чтобы он действовал согласно вашему требованию,

display:inline-block принимайте ширину в соответствии с не полным содержимым и display:block принимайте полную ширину

Answer 2

div#Formation{
  display: inline-block;
  width:100%;
}

div#Global{
  padding-bottom: 8px;
  padding-left: 20px;
  padding-right: 20px;
  line-height: 30px;
}

div#Formation{
  display: inline-block;
  width:100%;
}

div#columnNames {
    float: left;
    text-align: center;
    width: 15%;
    color: #7E97AD;
}

div#content {
    float: right;
    text-align: justify;
    width: 83%;
}

<div id="Global">
  <div id="Formation">
    <div id="columnNames">FORMATION</div>
    <div id="content">
      - <a title="Cliquez pour plus d'informations !" href="formation/esisar.html"><I>2015 - 2020</I><br>
      &emsp;<B>É</B>cole <B>S</B>upérieure d’<B>I</B>ngénieurs en <B>S</B>ystèmes <B>A</B>vancés et <B>R</B>éseaux (ESISAR)<br></a>
      - <a title="Cliquez pour plus d'informations !" href="formation/lycee.html"><I>2012 - 2015</I><br>
      &emsp;Lycée Camille Vernet - Valence - Bac S Section Européenne Allemand - Mention Bien</a>
    </div>
  </div>

  <br><br><br><br>
  <hr>


  <div id="Skills">
    <div id="columnNames">COMPETENCES</div>
    <div id="content">
      - <a title="Cliquez pour plus d'informations !" href="competences/latex.html">Maîtrise du langage de documentation scientifique LaTeX<br></a>
      - <a title="Cliquez pour plus d'informations !" href="competences/progimperative.html">Maitrise des langages de programmation impérative (C, C++, Python)<br></a>
      - <a title="Cliquez pour plus d'informations !" href="competences/objet.html">Maitrise des langages de programmation objet (C++, Python, Java)<br></a>
      - <a title="Cliquez pour plus d'informations !" href="competences/sql.html">Maîtrise du langage de requêtage SQL<br></a>
      - <a title="Cliquez pour plus d'informations !" href="competences/web.html">Notions en langages WEB (HTML, CSS et JavaScript)<br></a>
      - <a title="Cliquez pour plus d'informations !" href="competences/linux.html">Système d’exploitation LINUX (Administration et Programmation)<br></a>
      - <a title="Cliquez pour plus d'informations !" href="competences/secnumedu.html">Certification SecNumEdu ANSSI – Formation Initiale en Cybersécurité<br></a>
      - <a title="Cliquez pour plus d'informations !" href="competences/toeic.html">Anglais – TOEIC 940 points (14/12/2018) – Niveau C1<br></a>
      - <a title="Cliquez pour plus d'informations !" href="competences/allemand.html">Allemand – Niveau B1<br></a>
    </div>
  </div>
</div>