一切都將進入柔性容器

真的是新的編碼，我一直在玩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

我希望有人能幫助我這個結束。

謝謝！

來源

2016-04-25 Bj Petrie

您忘記了在頁腳之前關閉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>

來源

2016-04-25 04:31:44

你需要把頁腳你閉上你的身體和HTML之前。

試試這個：

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

來源

2016-04-25 04:31:45 seattlezib

一切都將進入柔性容器

回答

相關問題