介紹文本和顯示塊與內聯

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

來源

2012-08-17 jason328

不需要看到了PHP，只是HTML。請張貼輸出。 – Madbreaks 2012-08-17 03:54:11

什麼是「

」如果什麼都沒有來，檢查你的div的位置 – swapnesh 2012-08-17 03:56:14

首先你的while循環條件我猜應該是while（$ x <5），並且$ x變量應該在while循環中增加。 $ x ++ – Parag 2012-08-17 03:57:15

嘗試使用浮動留給image_box

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

來源

2012-08-17 04:28:16 Champ

非常感謝。有用。 – jason328 2012-08-17 05:27:11

我相信問題是<h2>標籤display:block默認。嘗試從流中移除它們，看看是否修復了圖像顯示問題。

來源

2012-08-17 03:55:27

圖像仍然顯示爲一個塊。 – jason328 2012-08-17 04:06:42

介紹文本和顯示塊與內聯

回答

相關問題