垂直和水平排列圖像（CSS）

我已經嘗試了幾個針對此問題的解決方案，但似乎沒有任何解決方法。垂直和水平排列圖像（CSS）

我想要實現一個相當簡單的事情：水平和垂直排列圖像，以便空間充滿照片。像這樣：https://placekitten.com/

我似乎無法找到一種方法來顯示圖像上的另一種。

.photos { 
 
    white-space: nowrap; 
 
    position: relative; 
 
    width: 50%; 
 
    margin: 2px; 
 
} 
 
.photos img { 
 
    position: absolute; 
 
    display: inline; 
 
    vertical-align: top; 
 
    padding: 2px; 
 
    margin: 5px; 
 
}

<div class="photos"> 
 
    <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/287.jpg" /> 
 
    <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" /> 
 

 
    <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg" alt="" /> 
 
    <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg" /> 
 

 
    <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" alt="" /> 
 
</div> 
 

 
<div class="photos"> 
 
    <img src="http://bit.ly/PiQUaV" alt="" /> 
 

 
    <img src="http://bit.ly/PiQUaV" alt="" /> 
 

 
    <img src="http://bit.ly/PiQUaV" alt="" /> 
 

 
    <img src="http://bit.ly/PiQUaV" alt="" /> 
 
</div>

我學習，我需要找到一種方法，而不使用Javascript。我認爲它必須是一些與容器div相關的工作，圖像是絕對的塊。

我認爲有一種方法可以用< li>，儘管我不知道是哪一種，也不認爲它是最好的方式。你可以幫我嗎？

編輯：注意到我的CSS後沒有聯繫，其實我得到了我的想法工作，但我還是不能設法從自己重新定位，收縮或放大時停止圖像 -

.photos { 
    width: 70%; 
    min-width: 
    height: auto; 
    margin: 5px auto; 
    position: relative; 
    } 

.photos h { 
    font-family: "Cooper STD", "Times", Courier, sans-serif; 
    display: inline-block; 
    float: left; 
    margin: auto; 
    margin-top: 5px; 
    max-width: initial; 
    position: relative; 
} 

.photos img { 
    display: inline-block; 
    float: left; 
    margin: 5px; 
    margin-bottom: 5px; 
    max-width: 70%; 
    position: inherit; 
} 

* { 
    box-sizing: border-box; 
} 

<div class="photos"> 
<div class="box"> 
    <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/287.jpg" /> 
    <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" /> 
    <h>Foto gattini</h> 
    <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg" alt="" /> 
    <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg" alt="" /> 
    <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg" alt="" /> 
    <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg" /> 

    <img src="http://i.ytimg.com/u/oxV7JbqVE-ZdnOYL0l3vIw/channels4_banner.jpg?v=516733c3" alt="" /> 
    <img src="http://bit.ly/PiQUaV" alt="" /> 

    <img src="http://bit.ly/PiQUaV" alt="" /> 

    <img src="http://bit.ly/PiQUaV" alt="" /> 

    <img src="http://bit.ly/PiQUaV" alt="" /> 
    <h>Questa e' una griglia responsive d'immagini</h> 
    <img src="http://bit.ly/PiQUaV" alt="" /> 
    </div> 
</div>

來源

2016-02-14 Gamanek

你好gamenek！在堆棧溢出中，我們通常更傾向於將所有相關代碼包含在問題中而不是外部網站上 - 這樣，如果其他人有相同的問題並且發現此帖子，我們可以確定所有相關信息都是仍可訪問。請考慮使用這個帖子的堆棧片段功能。 –

我看到了，感謝您的編輯:) – Gamanek

如果你使用網格，然後你可以堆疊它們，但是你想要的。我不確定你是否使用任何框架，但引導和基礎使得定位這樣的事情變得非常容易。您可以堆疊行並將圖片組織成包含所述行的列。下面是使用網格Grid Systems

來源

2016-02-14 18:15:29 andnowchris

我覺得這一個偉大的教程你want.I只創建grids.you只需把您的圖像放入it.just把你的img標籤內的電網，並給它的width和height100% .hope這對你有幫助。

<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 

 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
 
<title>align</title> 
 

 
<style type="text/css"> 
 
    body{ 
 
    \t margin: 0; 
 
    \t padding: 0; 
 
    } 
 

 
    div.maincontainer{ 
 
    \t width: 60%; 
 
    \t height: auto; 
 
    \t position: absolute; 
 
    \t left: 20%; 
 
    \t background-color: black; 
 
    } 
 
    div.rowone{ 
 
    \t width: 100%; 
 
    \t height: 320px; 
 
    \t background-color: brown; 
 
    \t position: absolute; 
 
    } 
 

 
    div.description{ 
 
    \t width: 50%; 
 
    \t height: 100%; 
 
    \t background-color: orange; 
 
    \t position: absolute; 
 

 
    } 
 

 
    div.imagetwo 
 
    { 
 
    \t width: 25%; 
 
    \t height: 100%; 
 
    \t background-color: pink; 
 
    \t position: absolute; 
 
    \t left: 50%; 
 
    } 
 

 
    div.twoimages{ 
 
    \t width: 25%; 
 
    \t height: 100%; 
 
    \t background-color: purple; 
 
    \t position: absolute; 
 
    \t left: 75%; 
 
    } 
 

 
    div.oneimage{ 
 
    \t width: 100%; 
 
    \t height: 50%; 
 
    \t background-color: green; 
 
    } 
 

 
    div.twoimage{ 
 
    \t width: 100%; 
 
    \t height: 50%; 
 
    \t background-color: blue; 
 
    } 
 

 
    div.rowtwo{ 
 
    \t width: 100%; 
 
    \t height: 320px; 
 
    \t background-color: gray; 
 
    \t position: absolute; 
 
    \t top: 330px; 
 
    } 
 

 

 
    div.iimageone{ 
 
    \t width: 50%; 
 
    \t height: 100%; 
 
    \t background-color: yellow; 
 
    \t position: absolute; 
 
    } 
 

 
    div.ithreeimages{ 
 
    \t width: 25%; 
 
    \t height: 100%; 
 
    \t background-color: pink; 
 
    \t position: absolute; 
 
    \t left: 50%; 
 
    } 
 

 
    div.timageone{ 
 
    \t width: 50%; 
 
    \t height: 50%; 
 
    \t background-color: blue; 
 
    \t position: absolute; 
 
    } 
 
    div.timagetwo 
 
    { 
 
    \t width: 50%; 
 
    \t height: 50%; 
 
    \t background-color: orange; 
 
    \t position: absolute; 
 
    \t left: 50%; 
 
    } 
 

 
    div.timagethree{ 
 
    \t width: 100%; 
 
    \t height: 50%; 
 
    \t background-color: purple; 
 
    \t position: absolute; 
 
    \t top: 50%; 
 
    } 
 

 
div.finalimage{ 
 
\t width: 25%; 
 
\t height: 100%; 
 
\t background-color: red; 
 
\t position: absolute; 
 
\t left: 75%; 
 
} 
 
</style> 
 

 
</head> 
 

 
<body> 
 

 
<div class="maincontainer"> 
 
    \t <div class="rowone"> 
 
     <div class="description"></div> 
 
     <div class="imageone"></div> 
 
     <div class="imagetwo"></div> 
 
     <div class="twoimages"> 
 
     <div class="oneimage"></div> 
 
     <div class="twoimage"></div> 
 
     </div> 
 
    \t </div> 
 

 
    <div class="rowtwo"> 
 
     <div class="iimageone"></div> 
 
     <div class="ithreeimages"> 
 
\t   \t <div class="timageone"></div> 
 
\t   \t <div class="timagetwo"></div> 
 
\t   \t <div class="timagethree"></div> 
 
     </div> 
 
     <div class="finalimage"></div> 
 
    </div> 
 

 

 
</div> 
 

 

 
</body> 
 
</html>

來源

2016-02-14 18:33:44

歡迎您的光臨，並樂於提供幫助。 –

老實說，看完你的解決方案後，我試着申請它，並沒有發生任何事情。我沒有注意到我沒有鏈接CSS表單。其實，我的CSS從來沒有鏈接到第一位。您的解決方案非常好，但我發現了另一種在CSS中使用簡單線條的方法，儘管我仍然不知道如何在縮小或放大窗口時阻止圖像重新定位。你能幫忙嗎？我已更新主帖子。 – Gamanek

垂直和水平排列圖像（CSS）

回答

相關問題