為什么在我設置了浮點數后，我的div框會向下堆疊？

Question

我正在一家網店上工作，我想擁有一個包含產品的產品領域，並且希望它們向左浮動，所以當我添加產品時，它與其余產品一起向左浮動。

問題

當我添加一個浮點數：左它向下堆疊而不是向左浮動，我不明白為什么？

例

示例圖片

碼：

 .product_gallery { margin: 0 auto; width: 1000px; list-style: none; float: right; position: relative; } .product_gallery li { float: right; width: 300px; margin-right: 50; border: 1px solid #999; } .product_gallery li img { width: 300px; height: 200px; float: right; } .product_description { position: absolute; width: 300px; height: 200px; background: rgba(0, 0, 0, 0.6); opacity: 0; transition: 0.5s ease-in; } .product_gallery li:hover .product_description { opacity: 0.7; } .product_description p { padding: 10px; color: #fff; font-size: 18px; } .product_information { height: 40px; background: blue; width: 100%; float: left; } .product_information h4 { float: left; color: #fff; width: 70%; margin: 10px; } .product_information span { float: right; color: #fff; margin: 5px; font-size: 20px; } .buy_now { background: blue; color: #fff; width: 85px; font-size: 14px; font-weight: bold; text-align: center; text-decoration: none; float: right; height: 18px; } 

 <ul class="product_gallery"> <li> <img src="images/test.png"> <div class="product_information"> <h4>AWP ASIIMOV</h4> <span>230:-</span> </div> <div class="product_description"> <p>Awp asiimov är ett fint skin om man gillar att spela awp :)</p> <a href="#" class="buy_now">BUY NOW</a> </div> </li> </ul> 

Answer 1

如果我真的了解你，你想讓你的div並排，但現在不是，因為第一個div的width: 100% ，所以第二個div轉到下一行。

將其寬度減小為可以包含在div width: 300px一行中的值。