In liquid layout, pictures are crowded together. Should min-height be set? _html/css_WEB-ITnose

液态布局，图片挤在了一起，是不是应该设置min-height？？？

div没有设置最小高度，是不是应该设置下最小高度？？？

避免页面加载，页面挤在一起。   就算设置了最好高度，图片自动缩放吧？？？  自动撑开div是吧？？？

回复讨论(解决方案)

            
                

 

                

                    

XXXXXXX

                                        

                    

                        
• 0XXXXX

                        
• 48,000XXXXX

                        
• 80.00%XXXXX

                    

                

                

XXXXX

            
        

.box-item { margin: 16px 0 0; position: relative; }
.box-item a.hover { opacity: 1; }
.box-item a { display: block; position: relative; }
.box-item .pic { text-align: center;min-height: 220px; }
.box-item .pic img { min-height: 220px; }

Why does setting "min-height: 220px;" have no effect? ​​It is still crowded together and does not open the divs in advance? ? ?

.box-item .info { padding-top: 0.2rem;background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0 , 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.6))); background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.4) 100%); position: absolute; width: 100%; left: 0; bottom: 0; color: #fff; font-size: 0.14rem; }
.box-item h3 { font-size: 0.14rem; padding: 0 0.15rem; }

Liquid layout, pictures are crowded together, should it be set min-height? ? ?

The div does not have a minimum height set. Should it set a minimum height? ? ?

Avoid page loading and pages being crowded together. Even if the best height is set, the picture will be automatically scaled, right? ? ? Automatically expand the div, right? ? ?

Remove the positioning of .info and add height to img
Move the title up

<style>.box-item {    margin: 16px 0 0;    position: relative;    border: 2px blue solid;}.box-item a.hover {    opacity: 1;}.box-item a {    display: block;    position: relative;    border: 2px green solid;}.box-item .pic {    text-align: center;}.box-item .pic img {    width:100px;    height:100px;}.box-item .info {    border: red 2px solid;    padding-top: 0.2rem;    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0        , 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.6)));    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%,        rgba(0, 0, 0, 0.4) 100%);    width: 100%;    color: #fff;    font-size: 0.14rem;}.box-item h3 {    font-size: 0.14rem;    padding: 0 0.15rem;}</style><div class="box-item">    <a href="/product/detail?id=9">        <div class="pic">            <img src="http://avatar.csdn.net/3/E/3/1_neorobin.jpg">        </div>        <div class="corner corner-12">            <b>XXXXX</b>        </div>        <div class="info">            <h3>XXXXXXX</h3>            <div class="pro">                <span style="width: 80%"></span>            </div>            <ul class="data clearfix">                <li><b>0</b><i>XXXXX</i></li>                <li><b>48,000</b><i>XXXXX</i></li>                <li><b>80.00%</b><i>XXXXX</i></li>            </ul>        </div>    </a></div>

In liquid layout, pictures are crowded together. Should min-height be set? ? ?

The div does not have a minimum height set. Should it set a minimum height? ? ?

Avoid page loading and pages being crowded together. Even if the best height is set, the picture will be automatically scaled, right? ? ? Automatically expand the div, right? ? ?

Remove the positioning of .info and add height to img
Move the title up

<style>.box-item {    margin: 16px 0 0;    position: relative;    border: 2px blue solid;}.box-item a.hover {    opacity: 1;}.box-item a {    display: block;    position: relative;    border: 2px green solid;}.box-item .pic {    text-align: center;}.box-item .pic img {    width:100px;    height:100px;}.box-item .info {    border: red 2px solid;    padding-top: 0.2rem;    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0        , 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.6)));    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%,        rgba(0, 0, 0, 0.4) 100%);    width: 100%;    color: #fff;    font-size: 0.14rem;}.box-item h3 {    font-size: 0.14rem;    padding: 0 0.15rem;}</style><div class="box-item">    <a href="/product/detail?id=9">        <div class="pic">            <img src="http://avatar.csdn.net/3/E/3/1_neorobin.jpg">        </div>        <div class="corner corner-12">            <b>XXXXX</b>        </div>        <div class="info">            <h3>XXXXXXX</h3>            <div class="pro">                <span style="width: 80%"></span>            </div>            <ul class="data clearfix">                <li><b>0</b><i>XXXXX</i></li>                <li><b>48,000</b><i>XXXXX</i></li>                <li><b>80.00%</b><i>XXXXX</i></li>            </ul>        </div>    </a></div>

Add height directly to img It doesn’t matter, why must it? ? ?

Remove the positioning of .info,
Move the title up

.box-item .pic img { min-height: 230px;} This will be OK

It feels like you are making a mobile page. It is recommended to set the width as a percentage and the height must be set! Set the min-height and max-height of the image

It feels like you are making a mobile page. It is recommended to set the width as a percentage and the height must be fixed! Set the min-height and max-height of the picture

Yes, the screen has various sizes, so the width cannot be set rigidly. But you must be able to hold up the page even when there are no pictures.

Scale proportionally? ? ?

Set the proportional width and height of img automatic scaling.