重寫內聯css以在智能手機上工作

-1

如何將這個CSS重寫爲在智能手機上向下堆疊的內容？重寫內聯css以在智能手機上工作

<div style="width: 1200px;"> 
<div style="float: left; line-height: 0; width: 358 px; margin: 0px 7px 0px 0px; border: 1px solid #021a40;"><img src="{{media url="wysiwyg/3row/3row-no-boarder_07.jpg"}}" alt="" /></div> 
<div style="float: left; line-height: 0; width: 358 px; margin: 0px 7px 0px 7px; border: 1px solid #021a40;"><img src="{{media url="wysiwyg/3row/3row-no-boarder_04.jpg"}}" alt="" /></div> 
<div style="float: left; line-height: 0; width: 358 px; margin: 0px 0px 0px 7px; border: 1px solid #021a40;"><img src="{{media url="wysiwyg/3row/3row-no-boarder_09.jpg"}}" alt="" /></div> 
<div style="clear: both;">&nbsp;</div> 
</div> 
</div> 
</div>

我嘗試添加像這樣

@media only screen and (max-width: 40em) { 
    .newspaper{ 
     /* Chrome, Safari, Opera */ 
     -webkit-column-count : 1 ; 
     -webkit-column-gap : 0px ; 
     -webkit-column-rule-style : outset ; 
     -webkit-column-rule-width : 1px ; 

     /* Firefox */ 
     -moz-column-count : 1 ; 
     -moz-column-gap : 0px ; 
     -moz-column-rule-style : outset ; 
     -moz-column-rule-width : 1px ; 

     column-count : 1 ; 
     column-gap : 0px ; 
     column-rule-style : outset ; 
     column-rule-width : 1px ; 
    }

公式，但它似乎並沒有工作..

現在看起來是這樣，但在智能手機你只看到第一圖像。 enter image description here

來源

2015-06-09 m_schou

你只需要使div成爲顯示塊。

<html> 
    <head> 

    <style> 

     .pictures { 
      float: left; 
      line-height: 0; 
     } 

     .pictures img { 
      width: 358px; 
      margin: 0px 7px 0px 0px; 
      border: 1px solid #021a40; 
     } 

     @media (max-width:40em) { 
      .pictures { 
       width: 40em; 
       display: block; 
      } 
     }  

    </style> 

    </head>  
    <body>  

    <div style="width: 1200px;"> 
    <div class="pictures"> 
     <img src="http://pausemag.co.uk/wp-content/uploads/2013/03/shirt.jpg" alt="" style=" width: 358 px; " /> 
    </div> 
    <div class="pictures"> 
     <img src="http://pausemag.co.uk/wp-content/uploads/2013/03/shirt.jpg" alt="" style=" width: 358 px; " /> 
    </div> 
    <div class="pictures"> 
     <img src="http://pausemag.co.uk/wp-content/uploads/2013/03/shirt.jpg" alt="" style=" width: 358 px; " /> 
    </div> 
    <div style="clear: both;">&nbsp;</div> 
    </div> 



    </body>  
    </html>

來源

2015-06-09 13:59:16

好看起來不錯！謝謝！ –

問題是什麼？當我將它重新調整到過去的40em時，它在我的瀏覽器上工作。 –

由於某種原因，我只得到兩件襯衫，如果我在iphone上打開，它會將圖片縮小到正確尺寸的最後10％。有沒有辦法將圖像寬度調整爲正在觀看的智能手機屏幕？ http://postimg.org/image/6pe6zjfpv/ –

重寫內聯css以在智能手機上工作

回答

相關問題