並排顯示圖像php＆css

Question

嘿，我已經寫了一些代碼來使用php顯示圖片...但是，當我想內嵌顯示這些圖像時，圖像卻顯示為塊狀，並占據了整個屏幕的整個寬度，但文字下方卻刻着描述這些書籍的內容。 您能幫我設置這個嗎，這是我的代碼

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'];

}

再次，我希望圖像並排出現而不阻塞...謝謝。

好吧，我遵循了為他們兩個建議的代碼，似乎可行的是當我將所有東西都浮動時，但是當我這樣做時，單詞出現在了側面。.我已經附上了圖片..我該如何解決這個問題

Answer 1

您可以在CSS中執行以下操作：

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

播放寬度設置，以使圖像看起來不被擠壓等。

Answer 2

您可以添加容器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;
}

我用js中的虛擬數據制作此演示 ，因為我無法使用php

Answer 3

@coderSte的小編輯嘗試

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

Answer 4

將此css規則應用於img（或為img添加一個類，例如cimg）

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

我想這應該可行並完成您想做的工作。

我正在更新我的答案以解決該問題： http : //codepen.io/anon/pen/bwgdEK檢查此...我想這就是您要尋找的。

您還將對html的結構進行一些更改，但這應該可以解決您的問題。