php - 并排显示图像 php 和 css

Question

嘿，我已经编写了一些代码来使用 php 来显示图片...但是，当我想以内联方式显示图像时，图像显示为 block 并占据了整个屏幕宽度，但带有描述书籍的文字就在他们下面。你能帮我设置一下吗 这是我的代码

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

我再次希望图像并排显示而不是阻塞...谢谢..

好吧，我按照为他们两个建议的代码进行操作，当我将所有内容都 float 时，似乎有效的代码，但是当我这样做时，文字出现在侧面..我附上了一张照片..我怎么能解决这个问题

Answer 1

您可以添加容器 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 做到这一点