Question

对编码非常陌生，我一直在使用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

中

我希望有人能帮助我。

谢谢！

Answer 1

您忘记在页脚前用flex-container关闭</div> div。确保在关闭</body>代码之前保留所有HTML。您在其中有其他无效代码，例如</h>而非</h1>，因此请务必检查语法。

还要避免使用内联CSS（包括那些不必要的span元素）。请记住，您确实不想浮动Flex容器的内容，因为flex布局实际上是浮动布局的替代方法。

.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>

Answer 2

你需要在关闭身体和html之前放置页脚。

请改为尝试：

</div>
<div id="footer">Ending</div>
</body>
</html>

一切都进入了flex-container

2 个答案: