フレックスコンテナに入ってくるものすべて

コーディングが本当に新しいです。私が取り組んでいるプロジェクトのフレックスコンテナで遊んでいます。私が抱えている問題は、コンテナスタイルがコンテナに収まるようになった後にコードに入れたすべてのことです。私がこれをやめたり、新しいコンテナを始める方法が不思議です。 HERESに符号Imが見て：私は私のブラウザでそれを確認するとフレックスコンテナに入ってくるものすべて

<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も保持するようにしてください。他の無効なコード（</h1>ではなく</h>など）があるので、構文を確認してください。

また、インラインCSS（不要なものも含めてspan要素を含む）は避けてください。また、実際にはフレックスコンテナの内容を浮動させたくないことに注意してください。フレックスレイアウトは実際にはフロートレイアウトの代替手段です。

.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

フレックスコンテナに入ってくるものすべて

答えて

関連する問題