全屏移動堆疊的3列

在全尺寸屏幕上，我有三個圖像，列格式應該一起佔據整個屏幕。現在，我的代碼起作用了，因爲圖像佔用了屏幕寬度，並且屏幕寬度小於600像素，圖像堆疊在一起。但問題是圖像不佔據整個寬度。代碼如下，我正在使用一個很大的樣本圖片，但它仍然沒有顯示圖片的整個高度。全屏移動堆疊的3列

編輯以拿出我的原代碼

好吧，每個評論，我已經改變了代碼如下：http://jsfiddle.net/zx11x99x/

.wrapper img{ 
 
    float:left; 
 
    width:100%; 
 
} 
 

 
@media screen and (min-width: 600px) { 
 
    .wrapper img{ 
 
     width:33%; 
 
    } 
 
}

<div class="wrapper"> 
 
    <img src="https://recodetech.files.wordpress.com/2014/05/early-vehicle-lores.jpg?quality=80&strip=info" alt=""> 
 
    <img src="https://recodetech.files.wordpress.com/2014/05/early-vehicle-lores.jpg?quality=80&strip=info" alt=""> 
 
    <img src="https://recodetech.files.wordpress.com/2014/05/early-vehicle-lores.jpg?quality=80&strip=info" alt=""> 
 
</div>

的問題仍然是，圖像不是全屏，我似乎無法弄清楚。

總之，我試圖去爲這一點，但與列堆積在移動 http://jsfiddle.net/9udg7qxg/

來源

2015-07-20 damann

你可以創建一個小提琴嗎？你也可以嘗試最小寬度... – Medda86

你的代碼看起來更像這樣：＃one，＃two，＃three {width：33％;向左飄浮; }或爲什麼不只是.wrapper div img {} – Medda86

例如例如例如例如例如例如例如例如例如http://jsfiddle.net/zx11x99x/

code

來源

2015-07-20 19:13:44 Medda86

這比我使用得更加優雅，謝謝。但是，圖像的高度呢？ – damann

np ...高度是相對於寬度的，還是你想要做一些關於高度的事情？ – Medda86

堆棧你的意思是在eacother之上......它的確如果你讓你的窗口更小...小於600px的包裝... – Medda86

更新時間：

* { padding: 0; margin: 0; } 

@media (max-width:1400px) and (min-width:600px) { 
.wrapper > img{ 
    float:left; 
    max-width:33%; 
    } 
} 

@media (max-width:600px) and (min-width:100px) { 
    .wrapper > img{ 
     width:100%; 
     display:block; 
    } 
}

JSFIDDLE

同樣確保你使用正確的Meta標籤。

來源

2015-07-20 19:28:37

嗯..嘗試所有這一切，雖然它的作品，它不是做我想要的東西它做... – damann

@damann好吧，更新試試這個。 –

全屏移動堆疊的3列

回答

相關問題