html - 为什么照片库在移动版本中不对齐？

Question

我的响应式照片库看起来很棒，直到它低于 1024 像素。我有一个通用样式的样式表和一个单独的媒体查询样式表。为什么我的图像挤在一起，而不是真正分开并作为单独的 block 对齐以适应 1024 像素以下的屏幕尺寸？例如，在最小的屏幕上，每列中只有一个图像是有意义的……对于平板电脑屏幕，两到三个图像。目前，当屏幕太小时，图像会相互重叠。

我试过的代码: 将此添加到每个媒体查询:

#gallery item {
     position:absolute;
     float: left;
     display: block;
}
#gallery img {
     width: 100%;
     position:absolute;
}

响应式照片库的 CSS:

#gallery .content{
border: 1px solid #E6E6E6;
margin: 20px 0 20px 0;  
}

.generic{
padding: 60px 0 80px 0;
}

.acontainer {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
display:block;
}

.acontainer:before,
.acontainer:after {
display: table;
content: " ";
}

.acontainer:after {
clear: both;
}

.acontainer:before,
.container:after {
display: table;
content: " ";
}

.acontainer:after {
clear: both;
}

.row {
margin-right: -15px;
margin-left: -15px;
}

.row:before,
.row:after {
display: table;
content: " ";
}

.row:after {
clear: both;
}

.row:before,
.row:after {
display: table;
content: " ";
}

.row:after {
clear: both;
}

.col-sm-4 {
width: 33.33333333333333%;
float:left;
position: relative;
}

#gallery .content{
border: 1px solid #E6E6E6;
margin: 20px 0 20px 0px;    
}

#gallery img {
vertical-align: middle;
}

媒体查询的 CSS:

@media handheld, only screen and (max-width: 1124px) {
}


/* -------------------------------------------------------------------  --- */
/*  Version 1024px
/* ---------------------------------------------------------------------- */
@media handheld, only screen and (max-width: 1024px) {
}

@media handheld, only screen and (max-width: 950px) {
}

/* ---------------------------------------------------------------------- */
/*  Mobile Version 767px
/* ---------------------------------------------------------------------- */

@media handheld, only screen and (max-width: 767px) {
footer h5 {
    text-align: center;
}
footer .social{
    margin: 30px 0 0 0;
    text-align: center;
}
header .navbar-nav > li > a {
    background: none repeat scroll 0 0 #EFEFEF;
    border-radius: 3px 3px 3px 3px;
    color: #666666 !important;
    font-size: 12.5px;
    line-height: normal;
    margin: 0;
    padding: 6px 25px;
}
header .navbar-nav {
    float: none;
    text-align: left;
}
header .navbar-nav > li > a {
    text-align: center;
}   
.navbar-nav {
    padding: 5px 0 0 0;
}
.navbar-nav > li {
    display: block;
    float: none;
    font-size: 15px;
    width: 100%;
    margin-bottom: 2px;
     margin: 0 0 2px;
}
.navbar-collapse {
    border: 0 !important;
    margin-top: 5px;
}
.slider .clearfix{
    padding: 0;
}
.section-title {
    text-align: center;
}
.section-title:after,.widget-title:after{
    margin: 15px auto 0 auto;
    position: inherit;
}
.newsletter {
    text-align: center;
}
.newsletter .fields h3 {
    font-size: 1.6em;
    text-align: center;
}
.newsletter .fields input.btn {
    font-size: 1em;
    padding: 10px 15px;
}
}

/* ---------------------------------------------------------------------- */
/*  Mobile Version 600px
/* ---------------------------------------------------------------------- */

@media handheld, only screen and (max-width: 600px) {
#logo img {
    max-width: 190px;
}
}

/* ---------------------------------------------------------------------- */
/*  Mobile Version 568px
/* ---------------------------------------------------------------------- */

@media handheld, only screen and (max-width: 568px) {
}

/* ---------------------------------------------------------------------- */
/*  Mobile Version 480px
/* ---------------------------------------------------------------------- */

@media handheld, only screen and (max-width: 480px) {
.separator{
    padding: 0 60px;
}
.newsletter .fields input.form-control {
    width: 100%;
    float: none;
    margin-right: 0;
    margin-bottom: 10px;
}
}

/* ---------------------------------------------------------------------- */
/*  Mobile Version 420px
/* ---------------------------------------------------------------------- */

@media handheld, only screen and (max-width: 480px) {

.slider-countdown {
    background-size: 2380px;
    height: 1010px;
}
}
/* ---------------------------------------------------------------------- */
/*  Mobile Version 320px
/* ---------------------------------------------------------------------- */

@media handheld, only screen and (max-width: 320px) {

.contform{
    padding: 15px 20px 36px 20px;
}
#gallery .item{
    padding: 0 30px 0 15px;
}

}

Answer 1

您的图片需要 100% 的宽度并将高度设置为自动。

#gallery img {
     height: auto;
     width: 100%;
     max-width: 300px; /*or what ever the maximum width of the image is */
}

不要给图像position:absolute。