如何解决我想使用 Html/Css 向左移动图像
我在尝试将图片添加到我的博客时遇到问题。我试图将我的图像向左推,但它不起作用。在图像下方,我粘贴了 home.html 的代码。我想在不移动所有帖子的情况下移动我的图片(请不要介意所有帖子,因为我只是在测试)。
{% extends 'base.html' %}
{% block content %}
<img src="https://media.vanguardcommunications.net/blog-e1505840253663.jpg" alt="A blog "style="width: 1190px; height: 400px; text-align:left; top: 100px;">
<h1>Posts</h1>
<ul>
{% for post in object_list %}
<li><a href="{% url 'article-detail' post.pk %}">{{post.title}}</a> - {{post.author.first_name}} {{post.author.last_name}} -
{{ post.post_date }} <small>
{% if user.is_authenticated %}
- <a href="{% url 'update_post' post.pk %}">(Edit)</a>
<a href="{% url 'delete_post' post.pk %}">(Delete)</a>
{% endif %}
</small><br/>
{{post.body }}</li>
{% endfor %}
</ul>
{% endblock %}
解决方法
使用 float: left;
,如下所示:
CSS:
.main-img {
width: 1190px;
height: 400px;
text-align: left;
float: left;
top: 100px;
}
HTML:
<img src="https://media.vanguardcommunications.net/blog-e1505840253663.jpg" alt="A blog" class="main-img">
Text-align: left;
仅用于文本,当想要更改图像的位置时使用 float
或 display
。
编辑:试试这个,看看它是否移动了图像:
.main-img {
width: 1190px;
height: 400px;
margin-right: 100px;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。