如何修复文本对齐

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>

Screenshot

Answer 1

所以你可以做一些事情来让这些项目内联。我推荐的是：

1) 将您的文本包裹在 <p> 标签中，因此它具有一些继承的文本样式，并且 html 更具语义。

2) 在 link/image 和文本本身周围添加一个包装器，这将允许您设置段落文本和图像的样式。

查看此代码笔以了解更多上下文。 https://codepen.io/ChaseAllbee/pen/ZEzOQJp?editors=1100

希望对您有所帮助！

如何修复文本对齐

How to fix text-alignment

html

css

zurb-foundation