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

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

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

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

回复讨论(解决方案)

aaf9977497a59afa7578ab456349c042
            fa15580bbfc955ca5c55aa4d9da0331f
                c89c0379ceec6c855d70d11007862d8b00ba95b68bdf1e4058ca5968a08a0801 16b28748ea4df4d9c2150843fecfba68
                d5cfce6b474714bae2ad4b6469f61fec
                    684271ed9684bde649abda8831d4d355XXXXXXX39528cedfa926ea0c01e69ef5b2ea9b0
                                        6499a6e7859aa608a94665b5c39661f7c29df60e0e15ddda864b1ea15c894a3354bdf357c58b8a65c66d7c19c8e4d11416b28748ea4df4d9c2150843fecfba68
                    874138de3cf94fb004c776e8032e4fb4
                        25edfb22a4f469ecb59f1190150159c6a4b561c25d9afb9ac8dc4d70affff41900d36329ec37a2cc24d42c7229b69747a5a8028ccc7a7e27417bff9f05adf5932XXXXX72ac96585ae54b6ae11f849d2649d9e6bed06894275b65c1ab86501b08a632eb
                        25edfb22a4f469ecb59f1190150159c6a4b561c25d9afb9ac8dc4d70affff41948,0000d36329ec37a2cc24d42c7229b69747a5a8028ccc7a7e27417bff9f05adf5932XXXXX72ac96585ae54b6ae11f849d2649d9e6bed06894275b65c1ab86501b08a632eb
                        25edfb22a4f469ecb59f1190150159c6a4b561c25d9afb9ac8dc4d70affff41980.00%0d36329ec37a2cc24d42c7229b69747a5a8028ccc7a7e27417bff9f05adf5932XXXXX72ac96585ae54b6ae11f849d2649d9e6bed06894275b65c1ab86501b08a632eb
                    929d1f5ca49e04fdcb27f9465b944689
                16b28748ea4df4d9c2150843fecfba68
                a05873d3c824d631345a48b4f9be58f4a4b561c25d9afb9ac8dc4d70affff419XXXXX0d36329ec37a2cc24d42c7229b69747a16b28748ea4df4d9c2150843fecfba68
            5db79b134e9f6b82c0b36e0489ee08ed
        16b28748ea4df4d9c2150843fecfba68

.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.