时间戳

首页 > 解决方案 > 我想使用 Html/Css 向左移动图像

python - 我想使用 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 %}

标签： pythonhtmlcssblogs

解决方案

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

推荐阅读