并排显示图像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的结构进行一些更改，但这应该可以解决您的问题。