顯示圖像並排顯示圖像php和css

嘿我寫了一些代碼來顯示圖片使用php ...但是，圖像顯示爲塊和佔用整個屏幕寬度，當我想顯示它們內聯，但用下面描述書籍的文字。能否請你幫我在這裏設置此是我的代碼顯示圖像並排顯示圖像php和css

for($row = 0; $row < sizeof($arr);$row++){ 
echo '<img src="images/'.$arr[$row]['isbn'].'.jpg" alt="Mountain View" >'.$arr[$row]['title'].'<br/>by '.$arr[$row]['author'].'<br/><input type="radio" name="booktype" value="hardcover" >Hardcover: $'.$arr[$row]['hardcover'].'<br/><input type="radio" name="booktype" value="softcover" >Softcover: $'.$arr[$row]['softcover'].'<br/><input type="radio" name="booktype" value="e-book" >E-Book: $'.$arr[$row]['e-book'];

}

我再次想圖像出現並排不會阻止...謝謝你..

好嗎我跟着他們兩個人的建議代碼似乎工作的那個是當我把所有東西都留下來的時候，但是當我這樣做的時候這些詞出現在了一邊..我附上了一張圖片..我怎樣才能解決這個問題

來源

2016-09-21 Will Barangi

可否請你分享源（'html'）看它是如何渲染的？ –

您可以添加div容器含有每列或您的圖片，並給這個div display:inline-block;

所以你的代碼會

for($row = 0; $row < sizeof($arr);$row++){ 
echo '<div class="img_container"><img src="images/'.$arr[$row]['isbn'].'.jpg" alt="Mountain View" ><br>'.$arr[$row]['title'].'<br/>by '.$arr[$row]['author'].'<br/><input type="radio" name="booktype" value="hardcover" >Hardcover: $'.$arr[$row]['hardcover'].'<br/><input type="radio" name="booktype" value="softcover" >Softcover: $'.$arr[$row]['softcover'].'<br/><input type="radio" name="booktype" value="e-book" >E-Book: $'.$arr[$row]['e-book'].'</div>'; 
}

和css

.img_container{ 
    display:inline-block; 
    margin-right:5px; 
}

我讓這個Demo虛擬數據在JS，我不能用PHP做

來源

2016-09-21 22:23:15

-1

應用此CSS規則的IMG（或添加一個類的IMGS例如CIMG）

img.cimg { 
    display: inline-block; 
    width: auto; 
    float: left; 
}

我想這應該工作，做你想要做的工作。

即時更新我的答案來解決問題： http://codepen.io/anon/pen/bwgdEK 檢查此...我想這是你在找什麼。

你將會改變你的html的結構，但這應該可以解決你的問題。

來源

2016-09-21 22:01:56

嘿，我已經試過這個，但是當我查看它的單詞出現在一邊時，我如何讓單詞直接出現在圖像下方，但同時使圖片浮動 –

你可以做這樣簡單的東西在你的CSS：

.your-element img { 
    display: inline-block; 
    width: 250px; 
    height: auto; 
}

玩的寬度設置使圖像看起來不擠壓等

來源

2016-09-21 22:02:55 CoffeeNinja

當我嘗試這是完美的阻止它下面的單詞..但它不是並排顯示圖像...我該如何解決這個問題.. –

小編輯從@coderSte嘗試

.your-element img { 
display: inline-flex; 
    width: 250px; 
    height: auto; 
}

來源

2016-09-21 22:27:58

顯示圖像並排顯示圖像php和css

回答

相關問題