无法将按钮浮动到其div的右侧吗？

Question

我正在尝试使用HTML和CSS制作基本的产品页面。它的左侧是图片，右侧是标题，说明和价格按钮（在CSS中分别为left-div和right-div）。在右div内，在产品说明之后，我试图通过在右div的相对右侧上的“购买”按钮在左侧的价格下方输入价格。但是，它一直紧贴价格。我在下面附上一张照片来演示该问题，以及我的html和css。任何帮助将不胜感激。

<style>
    .left-div {
        padding: 5%;
        width: 40%;
        float: left;
    }
    .right-div {
        padding: 5%;
        width: 40%;
        float: right;
    }
    .price-bar {
        display: flex;
        width: 100%
    }
    .price-tag {
        float: left;
    }
    .buy-button {
        background-color: var(--colour-tone-highlight);
        border-radius: 25px;
        float: right;
    }
</style>

<div>
    <div class="left-div">
        <img src="images/product.jpg" alt="Product" style="width:100%">
    </div>
    <div class="right-div">
        <h1>Product</h1>
        <p>Product details here.</p>
        <div class="price-bar">
            <div class="price-tag">
                <p>£9.99</p>
            </div>
            <div class="buy-button">
                <p style="color:white">BUY NOW</p>
            </div>
        </div>
    </div>
</div>

Answer 1

问题出在您的显示：.price-bar中的flex。这将覆盖所有浮动。

在显示下添加以下内容：flex：

justify-content: space-between;

这将传播flexbox的元素。