如何使HTML和CSS代碼中的圖片右側的圖片組離開？

我怎樣才能右側圖像框(box-2)定位左側圖像框(box-1)之後當設備是小於600px寬度(for Mobile and Tablet devices)在HTML和CSS編碼？

HTML代碼：

<div class="container_12 bot-1 lp"> 

    <div id="l" > 
    <ul> 
    <li > 
       <img src="images/page3-img1.jpg" alt="">   
       </li> 

      <li> 
       <img src="images/page3-img3.jpg" alt="">   
       </li> 
    </ul> 
    </div> 

    <div > 
    <ul id="rid"> 
     <li > 
      <img src="images/page3-img2.jpg" alt="" >   
     </li> 

<li> 
      <img src="images/page3-img4.jpg" alt="">   
     </li> 

    </ul> 
    </div>

請幫助我的人我怎麼能做到這一點。

來源

2016-01-05 smk pobon

你有這個 –

任何代碼共享你的代碼，它沒有幫助太多 –

設置圖像的箱體尺寸600px

(box-1) css = float:left; width:45%; 
(box-1) css= float:left; width:45%;

來源

2016-01-05 10:09:51

把你的CSS中：

@media (max-width: 600px) { 
     div,ul{float:left;} 
    }

來源

2016-01-05 10:09:55 RivaD

喜@riva，我已經做了，但它不工作。 '@media（....）{}'裏面的css代碼是什麼？ –

我一直在編輯它 – RivaD

-1

Please try with this 

@media only screen and (min-device-width: 480px) and (max-device-width: 768px) { 

    .box1,.box2{ 
    float:left; 
    width:48% 
    } 

}

來源

2016-01-05 10:15:48 AK47

沒有答案，它應該是一個評論。 –

更正了評論@Maddy – AK47

如前所述被別人使用的CSS @media (max-width: 600px)

下面是一個例子： Fiddle

也不要忘記用這個你<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

來源

2016-01-05 10:28:19 Maus

如何使HTML和CSS代碼中的圖片右側的圖片組離開？

回答

相關問題