如何将图像从左向右移动？

Question

在 HTML/CSS 中将图像向右移动的问题

我在尝试使用 CSS 将 HTML 页面的一部分中的图像移动到右侧时遇到问题。尽管尝试使用

float

和

margin-left

等方法，图像仍拒绝从其原始位置移动。这是我的代码的简化版本：

HTML：

<section class="home">
    <div class="home-content">
        <!-- Content here -->
    </div>
    <div class="img-box">
        <img src="assets/img.jpg" alt="">
    </div>
</section>

CSS：

.home {
    /* Styles for the section */
}

.home-content {
    /* Styles for the content */
}

.img-box {
    /* Styles for the image container */
    /* I've tried the following to move the image to the right */
    display: block;
    margin-left: auto;
    float: right;
}

我尝试过调整边距并使用

float: right

，但图像顽固地保持在其原始位置。如何解决此问题并成功将图像移动到该部分的右侧？任何帮助将不胜感激。谢谢！

Answer 1

html代码

<section class="home">
<div class="home-content">
    <!-- Content here -->
</div>
<div class="img-box">
    <img src="assets/img.jpg" alt="">
</div>
</section>

CSS代码

.home {
    position: relative; 
}

.home-content {
    /* Styles for the content */
}

.img-box {
    position: absolute; 
    top: 0; 
    right: 0; 
}