如何解決 CSS 上的 div 內部問題

Question

對不起我的英語不好..

我的內部 div 的寬度有問題。

我想變成這樣的形象，

但是來這里...

Html 和 Css，

CSS

 #tittel-text {padding: 1%; text-align:left;border-bottom:1px hidden; background-color:  #d7a8a8; }

 #closse-text {  color: #f2f2f2; padding: 0.6%;  cursor: pointer; float: right;}


 .text-pruduct {background-color: red;   margin: 1px; padding: 1.7%;  }

 .float_text{ background-color: yellow; float: right;  display: block; margin-top: 3%;  } 

  .bild-text { background-color: #a6a6a6; float: left; display: block; margin-top: 3%; } 



<div class="container">



                       <!-- code open new window -->
                   <div id="layerPreview-3" > </div>
                   <div id='layerPreviewContent-3'>
                           <!-- Mostramos el texto de cerrar para poder cerrar la ventana -->
                          <div id="tittel-text">Erfogreich zum Warenkorb hinzugefügt<span id="closse-text"  onclick="layer_close_3(event);">Schließen</span></div>

                         <div class="text-pruduct">
                            <div class="float_text">
                             <p>Anzahl der Artikel im Waremkorb:  1 </p>
                             <p>Wert des Warenkorbs: </p>
                            </div>
                             <div  class="bild-text">

                                 <img class="image-window" alt=""  src="https://i.imgur.com/64eoSkA.jpg" /> 

                                  <p>Rucksack aus Hanf Gelbe</p> 
                                  <p>Stückzahl: <b>1</b></p>
                                  <p>Bruttopreis: <b>40 &euro; </b></p>
                             </div> 
                             <div class="ajax-product-block"> 
                                    <a class="button_weiter_einkaufen" href="lalo.php">weiter kaufen</a> 
                                    <a class="button_zum_warenkorbs" href="lalo.php">zum warenkorb</a>
                             </div>
                         </div> 
                    </div>
                  </div>

我試圖像第一張圖片一樣來，但每次都遇到問題..

僅解決問題的代碼

有人可以幫我解決我的錯誤嗎？

Answer 1

所以這是實現這種結構的基本思路，現在只需根據您的需要給出 colors 和背景 colors，您的身材就完成了，

 body { margin: 0; padding: 0; box-sizing: border-box; } img { max-width: 100%; } #tittel-text { background-color: #d7a8a8; } #closse-text { color: #f2f2f2; }.text-pruduct { background-color: red; display: flex; flex-wrap: wrap; }.float_text { background-color: yellow; width: 40%; }.bild-text { background-color: #a6a6a6; display: flex; width: 60%; }.bild-text img { max-width: 200px; }.ajax-product-block { background-color: black; width: 100%; display: flex; justify-content: space-between; padding: 10px 30px; }.ajax-product-block a { padding: 5px 15px; background-color: #fff; }

 <div class="container"> <div class="text-pruduct"> <div class="bild-text"> <img class="image-window" alt="" src="https://lh3.googleusercontent.com/proxy/0DTr8HOTc3Q5uES2X1dk55jLRU58c0Rj8E_QTh2SyLDuTpIJWQl4_0HezDH2dOm4Yn3DZXjfVSMzasLNKtEmjw5lh_lumSwtd8AxDT2v2hhgP_vsBUGEVKTpt3vlx8fwt1P8oc08Z8UuoY80Bkz9GxTpY4tucV93T44VNa8qYF6bXlnaoCHcSbOy-NsCDfihRrc" /> <div> <p>Rucksack aus Hanf Gelbe</p> <p>Stückzahl: <b>1</b></p> <p>Bruttopreis: <b>40 &euro; </b></p> </div> </div> <div class="float_text"> <p>Anzahl der Artikel im Waremkorb: 1 </p> <p>Wert des Warenkorbs: </p> </div> <div class="ajax-product-block"> <a class="button_weiter_einkaufen" href="lalo.php">weiter kaufen</a> <a class="button_zum_warenkorbs" href="lalo.php">zum warenkorb</a> </div> </div> </div>