-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 回答