我想用这样的内联 block 显示内容: 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>
 <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>
 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%;
}
最佳答案
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>
 <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>
 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>
关于html - 行内 block 不按预期行事,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55863691/