对于编码来说真的很陌生，我一直在为我正在从事的元素使用 flex 容器。我遇到的问题是，我在容器样式之后放入代码中的所有内容似乎都在容器中结束。我想知道如何停止这个或启动一个新容器。这是我正在查看的代码:
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 100%;
height: 500px;
background-color: lightgreen;
margin: 0px;
}
.flex-right{
float: right;
background-color: none;
width: 700px;
height: 100%;
margin: auto;
}
.flex-left{
background-color: none;
width: 800px
height: 100%;
margin: 15px 90px;
float: left
}
</style>
<body>
<div class="flex-container">
<div class="flex-left"><img src="sample trainer.png" width="400" height="475" alt="" border="0"></div>
<div class="flex-right">
<h1><span style="font-family: Arial; font-weight: bold; font-style: normal; text-decoration: none; font-size: 30pt;">Sample Text Here</span></h>
<p><span style="font-family: Arial; font-weight: normal; font-style: italic; text-decoration: none; font-size: 24pt;">More Sample Text here</span></p>
</div>
</body>
</html>
<div id="footer">Ending</div>
当我在浏览器中查看它时，我看到页脚最终出现在 flex.container 中
我希望有人能帮我解决这个问题。
谢谢!
最佳答案
您忘记关闭您的 flex-container div 与 </div>在页脚之前。确保在关闭之前保留所有 HTML </body>标签。您那里还有其他无效代码，例如 </h>而不是 </h1> , 所以要小心检查你的语法。
同时避免内联 CSS(包括那些不必要的 span 元素)。请记住，您真的不想 float flex 容器的内容，因为 flex 布局实际上是 float 布局的替代方案。
.flex-container {
display: -webkit-flex;
display: flex;
width: 100%;
height: 500px;
background-color: lightgreen;
margin: 0px;
}
.flex-right{
float: right;
background-color: none;
width: 700px;
height: 100%;
margin: auto;
}
.flex-left{
background-color: none;
width: 800px
height: 100%;
margin: 15px 90px;
float: left
}<div class="flex-container">
<div class="flex-left"><img src="sample trainer.png" width="400" height="475" alt="" border="0"></div>
<div class="flex-right">
<h1><span style="font-family: Arial; font-weight: bold; font-style: normal; text-decoration: none; font-size: 30pt;">Sample Text Here</span>
</h1>
<p><span style="font-family: Arial; font-weight: normal; font-style: italic; text-decoration: none; font-size: 24pt;">More Sample Text here</span></p>
</div>
</div>
<div id="footer">Ending</div>关于css - 一切都进入 flex 容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36831821/