-2

複数の画像をエコーするwhileループがあります。次のステップは、画像の上にテキストを配置することです。ただし、そのテキストを while ループに追加するとすぐに、画像がインラインからブロックに移動します。ディスプレイをインラインに変更したり、画像やテキストをさまざまな位置で試したりすることから、ほぼすべてを試しました。これを修正するにはどうすればよいですか。以下のコード。

スクリプト セクション

<script type="text/javascript" >
$(function() {

$("h2")
    .wrapInner("<span>")

$("h2 br")
    .before("<span class='spacer'>")
    .after("<span class='spacer'>");

});
</script>

スタイルセクション

<style type="text/css">

body {height: 1100px;}
html {height:1200px; }

h2 { 
   top: 200px; 
   left: 25px; 
   width: 100px; 
  position: relative;
}

div #image_box {width: 700px; display:inline;}

img {border: 1px solid grey; padding: 0; margin:15px; display:inline;}

#viewers_pleasure { padding: 15px; height: 1200px; width: 4800px; }

h2 span { 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
}

h2 span.spacer {
padding:0 5px;
}
</style>

本体部

<div id="viewers_pleasure">

<div id="image_box">
<img src="images/89c246298be2b6113fb10ba80f3c6956_8" width="560" height="420"/>    
<h2><br>$</h2>
</div>

<div id="image_box">
<img src="images/8e73b27568cb3be29e2da74d42eab6dd_9" width="560" height="420"/>
<h2><br>$</h2>
</div>

<div id="image_box">
<img src="images/216e77337cdef3bd1bede845d1aba608_3" width="560" height="420"/>
<h2>weezer<br>$0</h2>
</div>

<div id="image_box">
<img src="images/452ff601eb791947cd76a2119f1db973_2" width="560" height="420"/>    
<h2><br>$</h2>
</div>

</div>
4

2 に答える 2

1

image_box に float left を使用してみてください

div #image_box {width: 700px; display:inline; float:left }
于 2012-08-17T04:28:16.463 に答える
0

問題は、<h2>タグがdisplay:blockデフォルトであるということだと思います。フローからそれらを削除してみて、画像表示の問題が修正されるかどうかを確認してください。

于 2012-08-17T03:55:27.800 に答える