0

時間を節約するために、言いたいことを画像で明確にします 画像

私のHTML

<div align="center"> 
         <div class="img-container">
         <div class="myconatiner">
          <h2>Headline</h2>
          <img src="img/image.png"> 
           <p>Caption</p>
         </div>
         </div>
        </div>

私のCSS

.img-container { width:100%; background-color:#59cbfc; position:absolute; right:0; left:0; vertical-align:central; }
.img-container h2 { float:left; padding:20px 0 0 0; max-width:500px; text-align:center; }
.img-container p { float:left; padding:10px 0 0 0; max-width:500px; text-align:center; }
.img-container img { float:right; width:500px; height:326px; padding-top:10px; bottom:0; }
.mycontainer { width:100%; max-width:1000px; height:auto; }

問題は、要素または div を配置するたびに、そのimg-containerdiv の下にあるため表示されないことです。

4

1 に答える 1

1

.img-containerがあるため、以下の要素は表示されませんposition:absolute。これにより、div は div の「背後」にある要素 (つまり、ソース コードでその下に配置した要素) をカバーします。

この問題には、次の 2 つの簡単な解決策があります。

  • 絶対positionにdivの下の要素。
  • floatページに div を配置するには、 またはその他の配置方法を使用します。heightforがないため、これはおそらくより良いアプローチです.img-container。以下に例を示します。

CSS:

.img-container {
    width:100%;
    background-color:#59cbfc;
    vertical-align:central;
    float:left;
}

floatの代わりに使用する JS Fiddle の例position:absolute。

于 2013-03-29T16:11:56.913 に答える