Html 如何修复文本对齐_Html_Css_Zurb Foundation

Html 如何修复文本对齐

html css zurb-foundation

Html 如何修复文本对齐,html,css,zurb-foundation,Html,Css,Zurb Foundation,我目前正在开发一个图书管理系统。我希望描述文本完全显示在封面图像的右侧，但只有一行显示在图像的右侧，其余的继续显示在图像下。我不知道我做错了什么 RubyonRails代码 <!doctype html> <html class="no-js" lang="de"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-wid

我目前正在开发一个图书管理系统。我希望描述文本完全显示在封面图像的右侧，但只有一行显示在图像的右侧，其余的继续显示在图像下。我不知道我做错了什么

RubyonRails代码

<!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 %>


茶
$（document.foundation（）；
()
, 
Verfügbar:/

生成的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>


同一天，你可以坐在一个房间里，你可以坐在另一个房间里
多洛雷·马格纳·阿利奎亚姆·埃拉特，塞德·迪亚姆·沃卢普图。在vero eos和accusam以及justo duo dolores和ea Reum。斯特克里塔
卡斯德·古伯格伦（kasd gubergren），没有海洋——塔基马塔圣所（takimata sanctus）是一个充满智慧的地方。科塞特图，洛雷姆·伊普苏姆·多洛·希特·阿梅特
这是一个很好的例子，它是一个临时的劳动和工作场所。
在vero eos和accusam以及justo duo dolores和ea Reum。斯特特·克里塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋——塔基马塔圣所（takimata sanctus est Lorem）
ipsum dolor sit amet。
Test-Titel-2（Test）
测试，
Verfügbar:30/50

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

1）将文本包装在

标记中，这样它就继承了一些文本样式，并且html更具语义

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

查看此代码笔了解更多上下文

希望有帮助

它可以工作，谢谢，但是您知道是否有办法在DB中存储的文本中使用

？这意味着您希望将描述文本包装在列表中？如果是这种情况，您应该能够用
- 项的数量。如果您在.wrapper元素上添加'display:flex'，那么它应该对齐所有内容，包括