如何修正文字对齐方式

Question

我目前正在开发图书管理系统。 我希望描述文本完全显示在封面图像的右侧，但图像的右侧仅显示一行，其余部分在图像下方继续。 我看不到我在做什么错。

Ruby on Rails代码

<!doctype html>
<html class="no-js" lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TEA</title>
    <link rel="stylesheet" href="https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css">
  </head>

  <body>
    <div class="row">
      <div class="medium-6 columns">
      </div>
      <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
      <script src="https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js"></script>
      <script>
        $(document).foundation();
      </script>
  </body>
</html>
<% @titles.each do |title| %>
  <div class="title-card padly">
    <%= link_to title, class: "cover" do %>
    <%= image_tag title.cover_url %>
    <% end %>
    <%=title.description%>
    <div class="title-info ell glassy-bg padmy padlx">
      <div class="title">
        <h6><%= title.title %> <span>(<%= title.publisher %>)</span></h6>
      </div>
      <%= title.publisher %>, <%= title.publisher_location %>
      <p class="left price label title-label radius"> Verfügbar: <%= title.available %>/<%= title.total %></p>
    </div>
  </div>
<% end %>

生成的HTML

<div class="title-card padly">
  <a class="cover" href="/titles/4">
    <img src="https://tse2.mm.bing.net/th?id=OIP.ilYLV5PpOl26myue6J2l4wHaFO&amp;pid=Api" />
  </a> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
  dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
  kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
  sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
  ipsum dolor sit amet.
  <div class="title-info ell glassy-bg padmy padlx">
    <div class="title">
      <h6>Test-Titel-2 <span>(Test)</span></h6>
    </div>
    Test,
    <p class="left price label title-label radius"> Verfügbar: 30/50</p>
  </div>
</div>

截图

Answer 1

因此，您可以做一些事情来内嵌这些项目。 我建议的是：

1）将您的文本包装在<p>标记中，以便继承一些文本样式，并且html更具语义。

2）在链接/图像和文本本身周围添加包装器，这将使您可以设置段落文本和图像的样式。

请查看此Codepen以获取更多上下文。 https://codepen.io/ChaseAllbee/pen/ZEzOQJp?editors=1100

希望有帮助！