Home  >  Article  >  Web Front-end  >  液态布局,图片挤在了一起,是不是应该设置min-height?_html/css_WEB-ITnose

液态布局,图片挤在了一起,是不是应该设置min-height?_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:38:491620browse

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

div没有设置最小高度,是不是应该设置下最小高度???

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


回复讨论(解决方案)


            
                
液态布局,图片挤在了一起,是不是应该设置min-height?_html/css_WEB-ITnose 

                

                    

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;}

为什么会设置“ min-height: 220px;”没有作用,还是挤在一起啊,并不会提前撑开div???

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

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

div没有设置最小高度,是不是应该设置下最小高度???

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



去掉 .info 的定位,  给 img 加 height
把标题上移


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

div没有设置最小高度,是不是应该设置下最小高度???

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



去掉 .info 的定位,  给 img 加 height
把标题上移



直接给img加上height不就行了,为什么一定要???

去掉 .info 的定位,  
把标题上移

.box-item .pic img { min-height: 230px;}  这样不就Ok了

感觉你是在做手机页面,建议宽度设百分比,高度必须定!图片设置一下min-height和max-height

感觉你是在做手机页面,建议宽度设百分比,高度必须定!图片设置一下min-height和max-height



是的,屏幕有各种尺寸,所以宽度不能设置死的。但是必须要在没有图的时候也能把页面撑起来。

等比例缩放???

设置img自动缩放的等比例宽度和高度。

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn