将div对齐成一行并固定在底部

Question

I have the following HTML/CSS/JS:

 function toggleClass() { document.getElementById('shopping-cart-body').classList.toggle('open'); } 

 .cart-preview { float: right; position: relative; } .cart-preview a, .cart-preview a:hover, .cart-preview a:visited { text-decoration: none; color: inherit; } .cart-preview .header { display: block; font-weight: bold; border: 1px solid #808080; padding: 5px; cursor: pointer; background-color: #fff; } .cart-preview .body { visibility: visible; position: fixed; height: 100%; top: 0; width: 400px; background-color: #fff; transition: right 1s linear; right: -400px; } .cart-preview .body.open { visibility: visible; transition: right 1s linear; right: 0px; } .cart-preview .body .shooping-cart-body { font-family: 'sans-serif'; width: 100%; text-align: center; } .cart-preview .body .products-container { position: relative; height: 100%; width: 100; margin-top: 15px; overflow: auto; } .cart-preview .body .product { display: inline-block; } .cart-preview .body .products-container>.product-image { position: absolute; width: 50%; left: 0; } .cart-preview .body .products-container>.product-details { position: absolute; width: 50%; float: right; } .cart-preview .body .products-container .color-circle:before { content: ' \\25CF'; font-size: 30px; } .cart-preview .body .checkout { position: relative; height: 100%; width: 100%; } .cart-preview .body .checkout>button { position: absolute; background: black; text-align: center; color: white; bottom: 20px; margin-bottom: 50px; height: 20px; width: 205px; margin-left: 100px; } .taxes { position: absolute; bottom: 150px; left: 0; } .cart-total { position: absolute; bottom: 100px; width: 100%; } .taxes { position: absolute; bottom: 130px; width: 100%; } .cart-total .value { float: right; } .cart-total .label { float: left; } .taxes .value { float: right; } .taxes .label { float: left; } 

 <div id="blockcart-wrapper"> <div class="blockcart cart-preview"> <div class="header"> <a rel="nofollow" href="#"> <img class="cart-icon" src="https://via.placeholder.com/20x20" onclick="toggleClass()"> </a> </div> <div class="body" id="shopping-cart-body"> <div class="close"><a href="" onclick="toggleClass()">X</a></div> <ul> </ul> <div class="shopping-cart-header">CART</div> <div class="products-container"> <div class="product"> <span class="prodcut-image"><img src="https://via.placeholder.com/250x100"></span> <div class="product-details"> <div class="name-header">NAME</div> <div class="product-quantity-details"> <span class="quantity">QTY</span> <span class="color-circle"></span> <span class="color">COLOR</span> </div> <div class="price-open"> <span class="product-price">XX.XX</span> <span class="product-link"><a href="#">öffnen</a></span> </div> </div> </div> </div> <div class="checkout"> <div class="taxes"> <span class="label">Taxes</span> <span class="value">0</span> </div> <div class="cart-total"> <span class="label">Total</span> <span class="value">0</span> </div> <button><a href="#">Checkout</a></button> </div> </div> </div> </div> 

I want to achieve, that the div 'product-details' is displayed in the same line as the image and both of them should take 50% of the place available. Additionally, i want to stick the checkout div to the bottom of the whole div , it is actually not even shown.

As you see, I used display: inline-block for the product div, but it is not working, I don't know why.

So bascically i want to achieve: image on the left, details on the right. There is a lot more CSS and HTML , for a better readability I removed them.

The whole body is position: fixed , because it should always take the full page.

This is a MVCE and should work in a jsfiddle or in codepen. Can someone help me?

Answer 1

First, it looks like some of your selectors weren't even working. Second, you were applying inline-block to the parent, when it really should have been applied to the children.

Either way, I think flexbox is a better solution here. I also made the image shrink or expand to fill the available space.

 function toggleClass() { document.getElementById('shopping-cart-body').classList.toggle('open'); } 

 .cart-preview { float: right; position: relative; } .cart-preview a, .cart-preview a:hover, .cart-preview a:visited { text-decoration: none; color: inherit; } .cart-preview .header { display: block; font-weight: bold; border: 1px solid #808080; padding: 5px; cursor: pointer; background-color: #fff; } .cart-preview .body { visibility: visible; position: fixed; height: 100%; top: 0; width: 400px; background-color: #fff; transition: right 1s linear; right: -400px; } .cart-preview .body.open { visibility: visible; transition: right 1s linear; right: 0px; } .cart-preview .body .shooping-cart-body { font-family: 'sans-serif'; width: 100%; text-align: center; } .cart-preview .body .products-container { position: relative; height: 100%; width: 100; margin-top: 15px; overflow: auto; } .product { display: flex; } .product>div { width: 50%; } .product .prodcut-image { margin-right: 20px; } .product img { width: 100%; height: auto; } .cart-preview .body .products-container>.product-image { position: absolute; width: 50%; left: 0; } .cart-preview .body .products-container>.product-details { position: absolute; width: 50%; float: right; } .cart-preview .body .products-container .color-circle:before { content: ' \\25CF'; font-size: 30px; } .cart-preview .body .checkout { position: relative; height: 100%; width: 100%; } .cart-preview .body .checkout>button { position: absolute; background: black; text-align: center; color: white; bottom: 20px; margin-bottom: 50px; height: 20px; width: 205px; margin-left: 100px; } .taxes { position: absolute; bottom: 150px; left: 0; } .cart-total { position: absolute; bottom: 100px; width: 100%; } .taxes { position: absolute; bottom: 130px; width: 100%; } .cart-total .value { float: right; } .cart-total .label { float: left; } .taxes .value { float: right; } .taxes .label { float: left; } 

 <div id="blockcart-wrapper"> <div class="blockcart cart-preview"> <div class="header"> <a rel="nofollow" href="#"> <img class="cart-icon" src="https://via.placeholder.com/20x20" onclick="toggleClass()"> </a> </div> <div class="body" id="shopping-cart-body"> <div class="close"><a href="" onclick="toggleClass()">X</a></div> <ul> </ul> <div class="shopping-cart-header">CART</div> <div class="products-container"> <div class="product"> <span class="prodcut-image"><img src="https://via.placeholder.com/250x100"></span> <div class="product-details"> <div class="name-header">NAME</div> <div class="product-quantity-details"> <span class="quantity">QTY</span> <span class="color-circle"></span> <span class="color">COLOR</span> </div> <div class="price-open"> <span class="product-price">XX.XX</span> <span class="product-link"><a href="#">öffnen</a></span> </div> </div> </div> </div> <div class="checkout"> <div class="taxes"> <span class="label">Taxes</span> <span class="value">0</span> </div> <div class="cart-total"> <span class="label">Total</span> <span class="value">0</span> </div> <button><a href="#">Checkout</a></button> </div> </div> </div> </div> 

Answer 2

Try this

 function toggleClass() { document.getElementById('shopping-cart-body').classList.toggle('open'); } 

 .cart-preview a:visited { text-decoration: none; color: inherit; } .cart-preview .header { display: block; font-weight: bold; border: 1px solid #808080; padding: 5px; cursor: pointer; background-color: #fff; } .cart-preview .body { visibility: visible; position: fixed; height: 100%; top: 0; width: 400px; background-color: #fff; transition: right 1s linear; right: -400px; } .cart-preview .body.open { visibility: visible; transition: right 1s linear; right: 0px; } .cart-preview .body .shooping-cart-body{ font-family: 'sans-serif'; width: 100%; text-align: center; } .cart-preview .body .products-container{ position: relative; height: 100%; width: 100%; margin-top: 15px; overflow: auto; } .cart-preview .body .product{ display: inline-block; width:100%; } .cart-preview .body .products-container > .product-image { position: absolute; width: 50%; left: 0; } .cart-preview .body .products-container > .product-details { position: absolute; width: 50%; float: right; } .cart-preview .body .products-container .color-circle:before{ content: ' \\25CF'; font-size: 30px; } .prodcut-image{ display:inline-block; } .product-details{ display:inline-block; vertical-align:top; } .cart-preview .body .checkout { position: relative; height: 100%; width: 100%; } .cart-preview .body .checkout > button { position: absolute; background: black; text-align: center; color: white; bottom: 20px; margin-bottom: 50px; height: 20px; width: 205px; margin-left:100px; } .taxes{ position: absolute; bottom: 150px; left: 0; } .cart-total{ position: absolute; bottom: 100px; width: 100%; } .taxes{ position: absolute; bottom: 130px; width: 100%; } .cart-total .value{ float: right; } .cart-total .label{ float: left; } .taxes .value{ float: right; } .taxes .label{ float: left; } 

 <div id="blockcart-wrapper"> <div class="blockcart cart-preview"> <div class="header"> <a rel="nofollow" href="#"> <img class="cart-icon" src="img.svg" onclick="toggleClass()"> </a> </div> <div class="body" id="shopping-cart-body"> <div class="close"><a href="" onclick="toggleClass()">X</a></div> <ul> </ul> <div class="shopping-cart-header">CART</div> <div class="products-container"> <div class="product"> <span class="prodcut-image"><img src="https://fakeimg.pl/250x100"></span> <div class="product-details"> <div class="name-header">NAME</div> <div class="product-quantity-details"> <span class="quantity">QTY</span> <span class="color-circle"></span> <span class="color">COLOR</span> </div> <div class="price-open"> <span class="product-price">XX.XX</span> <span class="product-link"><a href="#">öffnen</a></span> </div> </div> </div> </div> <div class="checkout"> <div class="taxes"> <span class="label">Taxes</span> <span class="value">0</span> </div> <div class="cart-total"> <span class="label">Total</span> <span class="value">0</span> </div> <button><a href="#">Checkout</a></button> </div> </div> </div> </div> 

Although html structure should be updated and more refined.