当我说向右浮动时，我的图像向右移动得太远，并出现一个滚动条

Question

当我说浮动时：对；我的图像太靠右了，出现了一个水平滚动条。如何使图像刚好到达页面的边缘？这是它的样子： https://i.stack.imgur.com/WOU4Z.png 这是我想要的样子 like:https://i.stack.imgur.com/tlVxo.png。我使用的 css 代码是：

.main-img { 
width: 273px; 
float: right; 
}

我使用的HTML代码是：

<div class="main-section">
    <div class="right-column-main">
        <div class="main-img">
            <img src="../Final/images/Pictureofwebsite.JPG" alt="Website Image">
        </div>
    </div>
    <div class="left-column-main">
        <div class="heading-one">
            <h1>CodePen is a <strong>social development environment</strong> for front-end designers and developers.</h1>
        </div>

        <div class="heading-two">
            <h2>It's the best place to build and deploy a website, show off you work, build test cases, and find inspiration.</h2>
        </div>

        <div class="center-btn-group">
            <button class="sign-up">Sign Up for Free</button>
            <button class="learn-more">Learn More</button>
        </div>
    </div>
</div>

Answer 1

哦，你只需要使用 flexbox.It is helpful.Do 之类的东西 body{display:flex;} 然后把 img 作为最后一个。

尽管问more.I承认，上面的解释真的很模糊。

当我说向右浮动时，我的图像向右移动得太远，并出现一个滚动条

When I say float right, my image goes too far right, and a scrollbar appears

html

css

css-float