我想使用 Html/Css 向左移动图像

Question

我在尝试将图片添加到我的博客时遇到了问题。我试图将我的图像向左推，但它不起作用。在图像下方，我粘贴了 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 %}

Answer 1

使用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;
}