ディビジョンが正しく整列していない

私は長年暮らしていました。これは多分数年前に問題になっていなかったことでしょう。私はそれはかなり基本的な問題だと思いますが、それは私を狂わせてしまいます。ディビジョンが正しく整列していない

私は2つのコンテナを構築しました。 Container1（赤いもの）は、画像を表示し、ディスプレイの70％までうまく調整します。

Container2（緑色のもの）はキャプションなどですが、Container1の下に置くことはできません。それは現在、ページ上のトップに固執している。

これに関するお手伝いは大変ありがとうございます。

#container1 { 
 
    width: 70%; 
 
    height: 70%; 
 
    position: absolute; 
 
    margin: auto; 
 
    top: 136px; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background-color: red; 
 
    z-index: 2; 
 
    display: inline-block; 
 
} 
 

 
#container2 { 
 
    width: 100%; 
 
    height: 50px; 
 
    position: relative; 
 
    left: 0; 
 
    right: 0; 
 
    background-color: green; 
 
    z-index: 2; 
 
    display: inline-block; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    position: absolute; 
 
    margin: auto; 
 
    border: 4px solid #ffffff; 
 
    border-bottom: 4px solid #ffffff; 
 
    box-shadow: 1px 1px 5px 1px #c9c9c9; 
 
    top: 0; 
 
    padding-bottom: 0px; 
 
    left: 0; 
 
    right: 0; 
 
}

<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="layout.css"> 
 
</head> 
 

 
<body> 
 

 
    <div id="container1"> 
 
    <img src="image.jpg" alt="image" style="padding: 0px 0px 0px 0px;" align="center" /> 
 
    </div> 
 

 
    <div id="container2"> 
 
    CAPTION INFO TO GO HERE 
 
    </div> 
 

 
</body> 
 

 
</html>

出典

2017-07-29 The Nuge

代わりに、インラインブロックのコンテナ2つの表示ブロックを作成します。また、 ''

タグをチェックアウトする可能性がある –

試してみてください。デフォルトでは、画像とキャプションの両方のためのスペースが組み込まれています。そして、はい、絶対/相対的な位置を緩く、必要はありません。 –

あなたは位置入れてきたように：相対はその＃1にcontainer2を意味：あなたの＃1 container1で絶対を位置しながら、それはページの通常のレイアウトに従っていません。は、デフォルトのの位置（静的）と同じように動作し、何らかの種類の上、左、右または下を指定します。

したがって、これを修正する方法の1つは、絶対および相対位置を削除することです。そのままドキュメントの流れを保つ。はるかに簡単です。

ここでは、位置付けの概念を改訂するlink to an excellent tutorialです。それは私をたくさん助けました。

関連するコードの簡略化されたバージョンを添付しました。見てみな。

#container1 { 
 
width: 70%; 
 
height: 170px; 
 
margin: 20px auto 10px auto; 
 
background-color: red ; 
 
} 
 

 

 
#container2 { 
 
width: 100%; 
 
height: 50px; 
 
background-color: green ; 
 
} 
 

 

 
img { 
 
max-width: 100%; 
 
max-height: 100%; 
 
margin: 0 auto; 
 
border: 4px solid #ffffff; 
 
border-bottom: 4px solid #ffffff; 
 
box-shadow: 1px 1px 5px 1px #c9c9c9; 
 
padding-bottom: 0px; 
 
}

<div id="container1"> 
 
<img src="image.jpg" alt="image" style="padding: 0px 0px 0px 0px;" 
 
align="center" /> 
 
</div> 
 

 
<div id="container2"> 
 
CAPTION INFO TO GO HERE 
 
</div>

出典

2017-07-29 20:23:39

ディビジョンが正しく整列していない

答えて

関連する問題