gpt4 book ai didi

html - 如何修复文本对齐

转载 作者:行者123 更新时间:2023-11-28 02:21:08 26 4
gpt4 key购买 nike

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

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

最佳答案

所以你可以做一些事情来让这些元素内联。我的建议是:

1) 将您的文本包装在 <p> 中标记,因此它继承了一些文本样式,并且 html 更具语义。

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

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

希望对您有所帮助!

关于html - 如何修复文本对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57528761/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com