html - 在一个容器中定位多个div

Question

这看起来很简单，但它并没有达到我想要的效果。

我需要将 3 个 div 放在左边，1 个放在右边，但我需要放在右边的那个并没有一直延伸到页面的边缘。

我需要左侧的 .pic1、左侧的 .info1、左侧的 .desc1(但在 .desc1 下方)和最右侧的 .price1。

<div class="gtr1">
    <div class="pic1">
    <img src="data:image/png;base64,<?php echo base64_encode($row['img'])?>"alt="This image cannot be found or has been removed." width="150" height="200">

    </div>
    <div class="info1">
        <p>
        <?php echo $row['name'] ?>  
        </p>
    </div>

            <div class="desc1">
        <p> 
            <?php echo $row['description'] ?>
        </p>
    </div>


    <div class="price1">
        <p>
            $<?php echo $row['price'] ?> 
            <br>
            <br>
            <!-- This is correct now -->
            <a href="cart.php?add=<?php echo $row['id_product'] ?>">Add to cart</a>
        </p>
    </div>
</div>

这就是我目前使用 CSS 所做的工作

.gtr1 {
float: left;
//*border-top: 1px solid rgb(51, 51, 51);*//
width: 100%;
}
.pic1 {
float: left;

}
.info1 {
float: left;
padding-left: 50px;
color: rgb(51, 51, 51);
font-size: 12px ;
/*width: 400px ;*/
width:25%;

}

    .desc1 {
float: left;
margin: 0;
color: rgb(51, 51, 51);
padding-left: 50px ;
width: 45%

}

    .price1 {
float: right;
padding-right: 5px;
color: #FF0000 ;
font-weight: bold;
margin: 0;
width:10%;
}

.price1 p {
float: right;
}

我感谢任何帮助:)

Answer 1

尝试把 clear: right;或清除:两者；在你想去右边的那个的CSS中。 如果你想让它们都放在同一个轴上，还有一件事。您应该调整宽度以确保所有宽度的宽度 = 100%。