并排显示图像php＆amp; 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中使用虚拟数据制作此Demo，因为我无法使用php

Answer 3

来自@coderSte的小编辑试试

soup = BeautifulSoup(r.text,"lxml")
div = soup.find('div', text="Earl E. Byrd")

print([div["title"]] + [d["title"] for d in div.find_all_previous("div", title=True)])

Answer 4

将此css规则应用于img（或将类添加到imgs中，例如cimg）

the ID value of this

我想这应该可行并完成你想做的工作。

我正在更新我的答案以解决问题： http://codepen.io/anon/pen/bwgdEK 检查一下...我想这就是你要找的东西。

您将对html的结构进行一些更改，但这应该可以解决您的问题。