我遇到了一个问题:我总是尝试使用 flexbox 将我的演示文稿扩展到整个页面，但我无法弄清楚为什么它不起作用..(见下文)。我怀疑使用列表的列有一些错误，但我还没有弄清楚。任何想法 ？ (列表的列在:“colonne_droite”-->“Le reste”)
这是我的 HTML
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<link rel="stylesheet" href="CV.css" />
<title> SNOW Jon </title>
</head>
<body>
<div class = "general">
<div class = "colonne_gauche">
</div>
<div class = "colonne_droite">
<header id = "Titre">
<div class = "texte">
<h1 class ="center"> SNOW Jon </h1>
<p class = "center"> "Je sais juste que je ne sais rien" </p>
</div>
<div class = "element_titre">
<a href = "jonsnow.jpg">
<img class = "bordered" src = "minijon.jpg" alt = "Photo de moi" />
</a>
</div>
</header>
<div id = "Le_reste">
<div class = "element">
<h2> Mon expérience </h2>
<p>
<ul>
<li>Roi du <strong> Nord </strong></li>
<li>Chef du <a href = "http://fr.gameofthrones.wikia.com/wiki/Le_Mur">Mur</a></li>
<li>Adepte des grandes actions héroïques</li>
</ul>
</p>
</div>
<div class = "element">
<h2> Mes Compétences </h2>
<p>
<ul>
<li>Très chanceux </strong></li>
<li>Un charisme qui lui permet de pécho la plus belle fille de la série</a></li>
<li>Fin stratège (mdr)</li>
</ul>
</p>
</div>
<div class = "element">
<h2> Ma formation </h2>
<p>
<ul>
<li>Bâtard de Ned </strong></li>
<li>Garde de Nuit</a></li>
<li>Ygritte</li>
</ul>
</p>
</div>
</div>
</div>
</div>
</body>
和我的CSS:
@font-face
{
font-family: 'cac_champagne';
src: url('cac_champagne/cac_champagne-webfont.eot') format('eot'),
url('cac_champagne/cac_champagne-webfont.woff') format('woff'),
url('cac_champagne/cac_champagne-webfont.ttf') format('truetype'),
url('cac_champagne/cac_champagne-webfont.svg') format('svg');
}
h1
{
font-family: 'cac_champagne',Arial,serif;
text-decoration: blink;
}
.center
{
text-align: center;
}
body
{
display: flex;
background: url("cv.jpg") fixed;
color: white;
}
.general
{
display: flex;
}
.bordered
{
border: 2px #BFBFBF groove;
box-shadow: 3px 3px 3px #B3B3B3 ;
}
.colonne_gauche
{
width: 100px;
background-image: url("liseré.jpg");
}
.colonne_droite
{
flex:1;
display: flex;
flex-direction: column;
align-items: justify;
}
#Titre
{
flex: 1;
display: flex;
background: white;
}
.texte
{
margin: auto;
text-align: center;
flex: 1;
}
#Le_reste
{
flex: 1;
display: flex;
justify-content: space-around;
background: yellow;
}
.element
{
flex: 1;
}
最佳答案
更改此 CSS 行
.general
{
display: flex;
}
进入这个
.general
{
display: flex;
width :100%;
}
关于html - 为什么我的 flexbox 没有正确扩展？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46003221/