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

尝试清楚：正确;或清楚：两者;在你想要向右走的那个CSS中。如果你想让它们全部适合同一轴，还有一件事。您应该使用宽度来确保所有这些宽度= 100％。

Answer 2

解决此问题的简单方法是将您正浮动的div放在容器的顶部。

<div class="gtr1">
  <div class="price1">
    ...
  </div>
  <div class="pic1">
    ...
  </div>
  <div class="info1">
    ...
  </div>
  <div class="desc1">
    ...
  </div>
</div>

在容器内定位多个div

2 个答案: