0 
 <style type="text/css">

      div.imageSub { position: relative; }
      div.imageSub img { z-index: 1; }
      div.imageSub div {
        position: absolute;
        left: 15%;
        right: 15%;
        bottom: 0;
        padding: 4px;
      }
      div.imageSub div.blackbg {
        z-index: 2;
        color: #000;
        background-color: #000;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
        filter: alpha(opacity=50);
        opacity: 0.5;
      }
      div.imageSub div.label {
        z-index: 3;
        color: white;
      }


     </style>
     <body>
      <div class="imageSub" style="width: 300px;"> <!-- Put Your Image Width -->
        <a href="../../../Downloads/Unnamed Site 2/stem studio.html"><img   
        src="../../../Downloads/Unnamed Site 2/PIC.jpg" alt="Something" width="300" 
        height="437" /></a>
        <div class="blackbg">Hello</div>
        <div class="label"> The Wolf</div>
     </div><br />
    <div class="imageSub" style="width: 300px;"> <!-- Put Your Image Width --><img    
    src="../../../Downloads/Unnamed Site 2/PIC.jpg" alt="Something" width="300" height="437"
      />

        <div class="blackbg">Hello</div>
        <div class="label"> The Wolf</div>


  </div>

  </body>
  </html>
  </body>
  </html>

2つのdiv画像を水平に揃えようとしています。

私はこのウェブサイトから画像にテキストをオーバーレイするためのコードを借りました：

このコードが機能するかどうかを確認するために、ランダムな写真とテキストを追加しました。完全にうまく機能しますが、垂直方向に表示されます。それらを水平に揃えるにはどうすればよいですか？助けていただければ幸いです。

4

3 に答える 3

0

  1. を取り外します<br/>

  2. CSS ルールを追加する

    .imageSub { float: left;}
.clear { clear: both; }

  3. 最後に追加<div class="clear"/>します。

フローティング環境ではステップ 3 を忘れないでください。

jsfiddle

于 2012-05-23T23:39:52.383 に答える
0

これは、フロートを使用した単純な 2 x 3 div ソリューションです: http://jsfiddle.net/Fb6Jk/

于 2012-05-24T00:05:32.043 に答える
0

問題を理解した場合は、両方の画像を並べて表示する必要があります。その場合は、次のように調整CSSしHTMLて許可する必要があります。

この実用的なフィドルの例を参照してください!

HTML

<div class="imageSub" style="width: 300px;">
  <a href="../../../Downloads/Unnamed Site 2/stem studio.html">
    <img src="../../../Downloads/Unnamed Site 2/PIC.jpg" alt="Something" width="300" height="437" />
  </a>
  <div class="blackbg">Hello</div>
  <div class="label"> The Wolf</div>
</div>
<div class="imageSub" style="width: 300px;">
  <img src="../../../Downloads/Unnamed Site 2/PIC.jpg" alt="Something" width="300" height="437" />
  <div class="blackbg">Hello</div>
  <div class="label"> The Wolf</div>
</div>

を削除しました<br>

CSS

div.imageSub {
  position: relative;
  float: left;
}
div.imageSub img {
  z-index: 1;
}
div.imageSub div {
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 0;
  padding: 4px;
}
div.imageSub div.blackbg {
  z-index: 2;
  color: #000;
  background-color: #000;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  opacity: 0.5;
}
div.imageSub div.label {
  z-index: 3;
  color: white;
}

float: left;に追加div.imageSub

編集済み

3x2 のビジュアル プレゼンテーションに適応した、以前の修正に基づく実用的なFiddle Example 。

于 2012-05-23T23:46:11.687 に答える