divを別のものにラップするCSSの問題

Question

私のセクションを適切にラップすることができないという問題があります。

私はdivのコンテナを持っていますが、PHPの部分にはいくつかのdivが設定されていて、正しく境界に貼り付ける方法はわかりません。

HTML/PHPの一部

<div class = "listaCarrello" id ="listaCarrello "style="display: <?php echo !isset($_GET['riepilogo'])&&isset($_SESSION['username'])? "block":"none"?>"> 
     <?php 
     $isEmpty = true; 
     foreach ($_COOKIE as $key => $val) { 
      $query = $connection->query("SELECT * FROM prodotto WHERE IDProdotto = $key"); 
      if ($query != null) { 
       $isEmpty = false; 
       $row = $query->fetch_assoc(); 
       echo "<div class = \"elemCarrello\">"; 
       echo "<p class=\"nomeCarrello\">" . $row['nomeProdotto'] . "</p>"; 
       echo "<div class = \"imgCarrello\">"; 
       echo "<img src = \"img/" . $row['immagine'] . "\" alt=\"" . $row['nomeProdotto'] . "\"height=\"150px\" width=\"150px\">"; 
       echo "</div>"; 
       echo "<div class=\"prezzoCarrello\">"; 
       echo "<p>Prezzo unitario " . $row['prezzo'] . "</p>"; 
       echo "<p> Quantità: " . $val; 
       echo " - Prezzo totale: "; 
       echo "€" . $row['prezzo'] * $val . "</p>"; 
       $totale = $totale + ($row['prezzo'] * $val); 
       echo "<p> Modifica la Quantità: "; 
       echo "<input type='number' id = 'quantita' name='quantita' value='" . $val . "'>"; 
       echo "<button onclick='refreshCookie($key, document.getElementById(\"quantita\").value)'>AGGIORNA</button>"; 
       echo "</div>"; 
       echo "<button class='eliminaCarrello' onclick='eliminaCookie($key)' style='background: white'> <img src='img/elimina.png' height='50' width='50'> </button>"; 
       echo "</div>"; 
      } 
     } 
     ?> 
     </div> 
     <?php 
     if (!$isEmpty) { 
      echo "<div class='checkOut'>"; 
      echo "<p>Totale: €" . $totale . "</p>"; 
      echo '<button id="2ndphase" onclick="goToAddress()">AVANTI</button>'; 
      echo "</div>"; 

     } 
     ?> 

CSSの一部、私の英語のため申し訳ありません

.listaCarrello{ 
border:solid; 
border-color: lightgray; 
border-radius: 10px; 
text-align: center; 
margin-top: 5px; 
width: 99%; 
margin-bottom: 5px; 
padding-bottom: 50px; 
} 

.elemCarrello{ 
margin-top: 5px; 
width: 99%; 
text-align: left; 
float:left; 
display: block; 
margin-bottom: 5px; 
border: solid; 
margin-left: 5px; 
border-radius: 10px; 
} 

.nomeCarrello{ 
padding-left: 10px; 
font-weight: bold; 
} 

.imgCarrello{ 
float: left; 
padding-left: 10px; 
} 

.eliminaCarrello{ 
margin-top: -13px; 
margin-bottom: 10px; 
} 

と私はあなたが私が言っているものを理解することを願っています。 例として画像を添付しました。

Answer 1

「コンテナ」divのオーバーフロースタイルをautoに設定します。

container{ 
    overflow:auto; 
}