我的缩略图样式在移动屏幕上无法正常工作答案

【问题标题】：Styling on my thumbnail not working properly on mobile screens我的缩略图样式在移动屏幕上无法正常工作
【发布时间】：2013-07-09 01:22:57
【问题描述】：

基本上，这就是在桌面上查看缩略图时的样子。图像向左浮动。

http://i255.photobucket.com/albums/hh140/testament1234/desktop_zps4ee3ead7.jpg

但在移动设备中查看时。样式似乎无法正常工作。

http://s255.photobucket.com/user/testament1234/media/thumbnail_zpsb3a07926.jpg.html?sort=3&o=1

我该如何解决这个问题？容器的宽度设置为 {width:100%, height:100%} 然后 img{width:100%}

这是 HTML/标记

<div id="article-container" class="alpha omega eleven columns articles">
         <div class="thumbnail">
             <img src="images/thumbnail-articles-1.jpg" alt="thumbnail" />
         </div>
         <h2><a href="#" title="Place your title">Place your title here</a></h2>
         <ul>
             <li id="meta-author"><span>By author /</span></li>
             <li id="meta-comments"><span>6 Comments /</span></li>
             <li id="meta-date"><span>May 12, 2013 /</span></li>
             <li id="meta-views"><span>320 Views </span></li>

         </ul>
         <p>Lorem ipsum dolor sit a met, con sect et ur adipiscing elit. Sed rutrum mi et blandit pellentesque. Duis vulputate placerat nisi nec varius. Phasellus non nisi dui!.</p>
         <a class="read-more" href="#" title="Read More">Read More</a>
     </div>

这是 CSS

/**************************************/
/*   MAIN CONTENT -> ARTICLES         */
/**************************************/

#article-container{margin-bottom:25px; border-bottom:5px solid #7e2d2d; padding-bottom:20px}
.thumbnail{float:right; width:220px; height:182px; margin-left:20px; background- color:#4d4d4d} 
.thumbnail img{margin:5px} 
.articles h2{font-size:25px}
.articles  li {color:#878080; font-size:10px; display:inline}
.articles h2, .articles ul, .articles p{margin-bottom:10px;}
.articles p{height:100px}
.articles li span{display:inline; padding-left:15px; background:url(images/meta-icons.png) no-repeat; width:11px; height:11px; padding-left:15px}

.articles h2 a{text-decoration:none; color:#4d4d4d}
.articles h2 a:hover{color:#7e2d2d}

#meta-author span{background-position:0px 0px}
#meta-comments span{background-position:0px -11px}
#meta-date span{background-position:0px -22px}
#meta-views span{background-position:0px -33px}



a.read-more{background-color:#4d4d4d; text-decoration:none; padding:5px; color:white; font:normal normal normal 15px 'droid_sansregular', sans-serif; text-transform:uppercase}
a:hover.read-more{background-color:#7e2d2d;}

【问题讨论】：

标签： html css responsive-design thumbnails markup

【解决方案1】：

当您说“容器的宽度设置为 {width:100%, height:100%} 然后 img {width:100%}”时，我想您指的是缩略图 div 的尺寸？如果是这种情况，那么您的 img 尺寸将超过容器的尺寸，因为您的 img 有 5px 边距，因此它将是 100% + 5px。

我认为您只需要删除 img 的尺寸，然后将显示设置为块。

【讨论】：