定位容器內的多個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％。