まず、Stackoverflow での最初の質問であり、まったく初めての質問です... 2 か月前に Web 開発を学び始め、HTML CSS とほとんどの JS といくつかの jQuery を学びました...実際のことをしたり、実験したりしたことはありませんしかし今、私は最初のプロジェクトを作成して練習を始めようとしています..
だから私はこのラッパー div を持っており、その中にさらに 2 つの div があります。問題は、2 番目の div をメイン div の下とラッパー div 内に配置できないことです。私はそれをここのコードで簡略化しました...その方法を教えてください...私の英語があなたに顔をぶつけさせてしまったら、ありがとうございます:)
HTML
<div class="wrapper">
<div id="first"></div>
<div id="second"></div>
</div>
CSS
.wrapper {
width:350px;
height:350px;
background-color:black;
margin: 0 auto;
}
#first{
width:250px;
height:300px;
background-color: white;
margin: 0 auto;
}
#second{
width:350px;
height:100px;
background-color: gray;
}
編集: CodePen で Pen を作成して、私がより良い意味を示すようにしました... http://codepen.io/Avisaac/pen/DgIzi これは、灰色の div が赤い div の下にあり、かつ赤の div の下部、また、赤の div をラッパーの中央に配置します。[中央に配置されるのは私のサイトのメイン コンテンツ領域であるため、ラッパーにも中央に配置する機能が必要であることに注意してください。
説明をわかりやすくするために、モニターから取得した prtScr も添付します。白い四角はメイン コンテンツ (#first を意味します) で、下部の白いグラデーションは、このグラデーションを含む 2 番目の div (#second) です。メイン コンテンツがパターンの背景と調和するように、メイン コンテンツはグラデーションの上にある必要があります 。