div布局的CSS样式

Question

Please see my HTML structure below - I am trying to have the .prod divs to be to the right of the logo, and the logo to be the full height of the .row div

I know this can be done using tables and floats but I want to try and avoid using those.

Here's my structure:

 .row { width: 100%; } .row > div { display: inline-block; } .row .image { height: 100%; width: 24%; } .row .prod { width: 75%; height: auto; } .prod > div { display: inline-block; width: Calc(50% - 4px); } div { border: solid 1px black; } 

 <div class="row"> <div class="image"> <img alt="Full Height Logo" src="" /> </div> <div class="prod"> <div class="prod_image"> <img alt="Product Image" src="" /> </div> <div class="prod_info"> Prod Info </div> </div> <div class="prod"> <div class="prod_image"> <img alt="Product Image" src="" /> </div> <div class="prod_info"> Prod Info </div> </div> </div> 

Answer 1

Wrap the additional info inside another div and give it the remaining width.

I have given it 74% because of the extra space from inline-block elements. Adjust it to your requirement. I would prefer flexbox if you are implementing it for modern browsers.

 .row { width: 100%; } .row > div { display: inline-block; } .row .image { height: 100%; width: 24%; vertical-align: top; /* Default to baseline, align to the top */ } .row .product_info { width: 74%; /* Remaining width */ } .row .product_info .prod { /* width: 75% */ Remove height: auto; } .prod > div { display: inline-block; width: Calc(50% - 4px); } div { border: solid 1px black; } 

 <div class="row"> <div class="image"> <img alt="Full Height Logo" src="" /> </div> <div class="product_info"> <div class="prod"> <div class="prod_image"> <img alt="Product Image" src="" /> </div> <div class="prod_info"> Prod Info </div> </div> <div class="prod"> <div class="prod_image"> <img alt="Product Image" src="" /> </div> <div class="prod_info"> Prod Info </div> </div> </div> </div> 

Answer 2

flexbox can do that.

 .row { display: flex; } .image, .prod { flex: 1; background: lightblue; text-align: center; height: 75px; } .image { flex: 0 0 auto; background: orange; display: flex; flex-direction: column; } .image img { height: 100%; width: auto; } 

 <div class="row"> <div class="image"> <img alt="Full Height Logo" src="http://lorempixel.com/output/food-qc-50-50-1.jpg" /> </div> <div class="prod"> <div class="prod_image"> <img alt="Product Image" src="" /> </div> <div class="prod_info"> Prod Info </div> </div> <div class="prod"> <div class="prod_image"> <img alt="Product Image" src="" /> </div> <div class="prod_info"> Prod Info </div> </div> </div> 

Answer 3

Flexbox?

I'm still pretty new to flexbox myself, but you could use the align-items: stretch property on your container to cause your items to stretch, but give the .prod div's a max-height so that they only stretch so much. You can also set various widths properties using the flex property on your flex items so that you get the width your after.

For more information: https://css-tricks.com/snippets/css/a-guide-to-flexbox/