使范围与水平线上的div旁边的另一个范围的底部对齐

Question

(I know that the title is vague but I seriously had no clue on how I could explain this in a sentence.) I'm trying to line up elements inside a div in a certain way without success. Basically, I'm making a checkout cart layout that should look like this:

But this is what it ends up looking like with my current code:

The code:

  #shopping_cart_container .shopping_cart > a:first-child { display: block; color: #000000; float: right; line-height: 16px; overflow: hidden; } .shopping_cart .more_info { color: #000; background: #fff; padding: 5px 10px 6px 10px; display: inline-block; } #shopping_cart_container .shopping_cart > a:first-child span.cart_name { color: #000000; float: left; margin-top: 7px; padding-right: 5px; padding: 5px 10px 6px 10px; display: inline-block; } #shopping_cart_container .shopping_cart > a:first-child span.cart_name:before { content: "\\f07a"; font-family: "FontAwesome"; display: inline-block; padding-right: 10px; float: none; padding: 0px; color: #000000; } #shopping_cart_container .ajax_cart_quantity { font-size: 33px; font-weight: bold; float: left; } #shopping_cart_container .more_info .ajax_cart_product_txt, .ajax_cart_product_txt_s, .ajax_cart_total { float: left; clear: both; } .invisible { display: none; } 

  <div id="shopping_cart_container"> <div class="shopping_cart"> <a href="http://localhost/Checkout" title="Checkout" rel="nofollow"> <span class="cart_name"></span> <div class="more_info"> <span class="ajax_cart_quantity">1</span> <span class="ajax_cart_product_txt">Product</span> <span class="ajax_cart_product_txt_s invisible">Products (shows when there is more than 1 item)</span> <span class="ajax_cart_total">$99</span> <span class="ajax_cart_no_product invisible">Empty (shows when there are no items in cart)</span> </div> <div class="cartSummary invisible">Cart Summary that shows when hovered over</div> </a> </div> </div> 

JSFiddle

I apologize in advance if the code is a mess but as you can see, I've messed around with float quite a bit in order to try to align it all correctly. I've hit a brick wall here so I'd appreciate any pointers!

Answer 1

I did this

 #shopping_cart_container .shopping_cart > a:first-child { display: block; color: #000000; float: right; line-height: 16px; overflow: hidden; } .shopping_cart .more_info { color: #000; background: #fff; padding: 5px 10px 6px 10px; display: inline-block; } #shopping_cart_container .shopping_cart > a:first-child span.cart_name { color: #000000; float: left; margin-top: 7px; padding-right: 5px; padding: 5px 10px 6px 10px; display: inline-block; } #shopping_cart_container .shopping_cart > a:first-child span.cart_name:before { content: "\\f07a"; font-family: "FontAwesome"; display: inline-block; padding-right: 10px; float: none; padding: 0px; color: #000000; } .product_block { display: inline-block; vertical-align: middle; } .product_block span.ajax_cart_product_txt { display: block; } .checkout_button { background: #333; border: none; color: #fff; font-size: 10px; padding: 3px 10px; } #shopping_cart_container .ajax_cart_quantity { font-size: 33px; font-weight: bold; vertical-align: middle; } .invisible { display: none; } 

 <div id="shopping_cart_container"> <div class="shopping_cart"> <a href="http://localhost/Checkout" title="Checkout" rel="nofollow"> <span class="cart_name"></span> <div class="more_info"> <span class="ajax_cart_quantity">1</span> <div class="product_block"> <span class="ajax_cart_product_txt">Product</span> <span class="ajax_cart_product_txt_s invisible">Products (shows when there is more than 1 item)</span> <span class="ajax_cart_total">$99.99</span> <span class="ajax_cart_no_product invisible">Empty (shows when there are no items in cart)</span> </div> <button type="button" class="checkout_button"> Checkout </button> </div> <div class="cartSummary invisible">Cart Summary that shows when hovered over</div> </a> </div> </div> 

I suppose it does the work, I wrapped the "product" & "price" in a div to manage it independently from the other span.

Answer 2

Try this. Hope this helps.

 #shopping_cart_container .shopping_cart > a:first-child { color: #000000; float: right; line-height: 16px; overflow: hidden; } .shopping_cart .more_info { color: #000; background: #fff; padding: 5px 10px 6px 10px; display: inline-block; } #shopping_cart_container .shopping_cart > a:first-child span.cart_name { color: #000000; float: left; margin-top: 7px; padding-right: 5px; padding: 5px 10px 6px 10px; display: inline-block; } #shopping_cart_container .shopping_cart > a:first-child span.cart_name:before { content: "\\f07a"; font-family: "FontAwesome"; float: middle; color: #000000; } #shopping_cart_container .ajax_cart_quantity { font-size: 40px; font-weight: bold; float: left; margin-top: 7px; margin-right: 10px; } #shopping_cart_container .more_info .ajax_cart_product_txt, .ajax_cart_product_txt_s, .ajax_cart_total { font-size: 15px; float: left; clear: both; } .product-cost{ float: right; } .invisible { display: none; } 

 <div id="shopping_cart_container"> <div class="shopping_cart"> <a href="http://localhost/Checkout" title="Checkout" rel="nofollow"> <span class="cart_name"></span> <div class="more_info"> <span class="ajax_cart_quantity">1</span> <div class = "product-cost"> <span class="ajax_cart_product_txt">Product</span> <span class="ajax_cart_product_txt_s invisible">Products (shows when there is more than 1 item)</span> <span class="ajax_cart_total">$99</span> </div> <span class="ajax_cart_no_product invisible">Empty (shows when there are no items in cart)</span> </div> <div class="cartSummary invisible">Cart Summary that shows when hovered over</div> </a> </div> </div>