定位容器内的多个div

Question

这似乎很简单，但它只是没有去我想要的地方。

我需要将左侧的div和右侧的右侧的3个位置对齐，但是我需要在右侧的位置不会一直拖到页面的边缘。

我需要将.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

最简单的办法来解决，这是把你是div漂浮在容器的顶部。

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

Answer 2

尝试把明确的：权利;或清楚：两者;在你想要去的那个CSS的CSS中。 还有1件事情，如果你想让他们都在同一轴上。你应该玩弄宽度以确保所有宽度都为100％。