0

まず、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) です。メイン コンテンツがパターンの背景と調和するように、メイン コンテンツはグラデーションの上にある必要があります 。

4

2 に答える 2

0

@DevlshOneが言及したように、下の平均が重複している場合は、これを試してください：

.wrapper {
    width:350px;
    height:350px;
    background-color:black;
    margin: 0 auto;
    position: relative;
 }

 #first{
     width:250px;
     height:300px;
     background-color: white;
     margin: 0 auto;
     position: absolute;
     top: 0; left: 0;
 } 
 #second{
     width:350px;
     height:100px;
     background-color: gray;
     position: absolute;
     top: 0; left: 0;
 }

これをフィドル：ここ

しかし、あなたの平均が上にあり、下にある場合は、これを試してください。

.wrapper {
    width:350px;
    height:350px;
    background-color:black;
    margin: 0 auto;
    overflow: hidden /* or scroll or auto */
}
#first {
    width:250px;
    height:300px;
    background-color: white;
    margin: 0 auto;
} 
#second{
    width:350px;
    height:100px;
    background-color: gray;
}

このための別のフィドル：ここ

于 2013-09-15T14:38:07.107 に答える
0

高さと幅が一致しません。ラッパーの高さをさらに追加してみてください。350px ですが、他の 2 つの div の高さを追加すると 400px になります。

于 2013-09-15T14:44:02.583 に答える