如何在CSS中實現圖庫

我有四個圖像並排排列。除第三張圖像低於第二張圖像外。兩者都對齊到第一張圖片的右側。第四個圖像與第二個和第三個圖像（堆疊在彼此的頂部）右側對齊。如何在CSS中實現圖庫

見圖片： http://www.gliffy.com/go/publish/9802269

如何在CSS中實現這一點？

我有以下代碼：

<div class="examples"> 
    <div class="example"><img src="examples/1.jpg" /></div> 
    <div class="example"><img src="examples/2.jpg" /></div> 
    <div class="example"><img src="examples/3.jpg" /></div> 
    <div class="example"><img src="examples/4.jpg" /></div> 
</div>

我要自動執行此操作。沒有使用HTML的黑客。

我把它們並排排列，但我不知道如何對齊第二個和第三個圖像，以便第二個圖像位於第三個圖像的頂部。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <style type="text/css"> 
     .examples { 
      position: relative; 
      display: block; 
      box-sizing: border-box; 
      height: 100vh; 
      width: 100%; 
      margin: 0; 
      padding: 0; 
     } 
     .example { 
      position: absolute; 
      background-size: cover; 
      background-repeat: no-repeat; 
      width: 33.33%; 
      cursor: pointer; 
      margin: 0; 
      padding: 0; 
      box-sizing: border-box; 
      background-position: 50% 50%; 
     } 
     .example:nth-child(1) { 
      top: 0; 
      left: 0; 
      height: 100%; 
      background-image: url(examples/1.jpg); 
     } 
     .example:nth-child(2) { 
      top: 0; 
      left: 33.33%; 
      height: 50%; 
      background-image: url('examples/2.jpg'); 
     } 
     .example:nth-child(3) { 
      top: 50%; 
      left: 33.33%; 
      height: 50%; 
      background-image: url('examples/3.jpg'); 
     } 

     .example:nth-child(4) { 
      top: 0; 
      left: 66.66%; 
      height: 100%; 
      background-image: url('examples/4.jpg'); 
     } 
    </style> 
</head> 
<body> 
<div class="examples"> 
    <div class="example"></div> 
    <div class="example"></div> 
    <div class="example"></div> 
    <div class="example"></div> 
</div> 
</body> 
</html>

來源

2016-01-17 Pota Onasys

會不會有永遠是4張圖片？ –

是總是會有4張圖片 –

我想你應該包裹所述第二和第三圖像上的分度，第一和第四圖像之間的浮動這樣的：

<div class="examples"> 
    <div class="example"></div> 
    <div class="wrap"> 
    <div class="example-half"></div> 
    <div class="example-half"></div> 
    </div> 
    <div class="example"></div> 
</div>

然後在渦卷類的圖像具有的顯示塊就可以了

.example { 
    background:red; 
    padding: 20px 20px; 
} 
.wrap, .example { 
    float: left; 
} 
.example-half { 
    background:blue; 
    display: block; 
    padding: 10px 10px; 
} 
.example, .example-half { 
    width: 50px; 
    margin: 0; 
}

你可以做造型等等。希望這有助於好運

我創建了一個簡單的小提琴here

來源

2016-01-17 02:33:15 noobHere

我發現一些作品。我不知道我是否會爲你的照片工作。請告訴我，如果沒有。

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
.example { 
    width: 25%; 
    float: left; 
    margin: 0; 
    padding: 0; 
} 
.example img { 
    width: 100%; 
    height: auto; 
    display: block; 
} 

</style> 
</head> 
<body> 
<div class="examples"> 
    <div class="example"><img src="examples/1.jpg" /></div> 
    <div class="example"> 
     <div class="second"><img src="examples/2.jpg" /></div> 
     <div class="third"><img src="examples/3.jpg" /></div> 
    </div> 
    <div class="example"><img src="examples/4.jpg" /></div> 
</div> 
</body> 
</html>

來源

2016-01-17 02:35:45 Hawkeye

我正在尋找一個純粹的CSS解決方案，而無需更改當前的HTML –

@PotaOnasys您需要在兩幅圖像周圍有一個額外的

元素。據我所知，你不能純粹用CSS來完成它。 – Hawkeye

下面是一個純粹的CSS解決方案。一個告誡，你會遇到一些尺寸的pixel rounding，導致在某些視口尺寸下圖像被一個或多個像素點關閉。

.examples { 
 
     position: relative; 
 
     display: block; 
 
     box-sizing: border-box; 
 
    } 
 
    .example { 
 
     width: 25%; 
 
     height: auto; 
 
     position: absolute; 
 
     margin: 0; 
 
     padding: 0; 
 
     display: inline-block; 
 
     box-sizing: border-box; 
 
    } 
 
    .example img { 
 
     width: 100%; 
 
     height: auto; 
 
     display: block; 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    
 
    .example:nth-child(1) { 
 
     position: relative; 
 
    } 
 
    
 
    .example:nth-child(3) { 
 
     margin-top: 12.475%; 
 
     margin-bottom:-50%; 
 
    } 
 
    
 
    .example:nth-child(4) { 
 
     left: 50%; 
 
    }

<div class="examples"> 
 
    <div class="example"><img src="http://placehold.it/400x400&text=Image1" /></div> 
 
    <div class="example"><img src="http://placehold.it/400x200&text=Image2" /></div> 
 
    <div class="example"><img src="http://placehold.it/400x200&text=Image3" /></div> 
 
    <div class="example"><img src="http://placehold.it/400x400&text=Image4" /></div> 
 
</div>

和工作jsFiddle

來源

2016-01-17 02:52:00

這不起作用。第二個和第三個圖像重疊。 –

HTML

<div class="examples"> 
    <div class="example"><img src="examples/1.jpg" /></div> 
    <div class="example"><img src="examples/2.jpg" /></div> 
    <div class="example"><img src="examples/3.jpg" /></div> 
    <div class="example"><img src="examples/4.jpg" /></div> 
</div>

CSS

.examples { 


display:flex; 
    width:600px; 
    border:1px solid Blue; 
} 

.example:nth-child(1), 
.example:nth-child(4) 
{ 
    flex:0 0 40%; 
    background:Pink; 
} 

.example:nth-child(2), 
.example:nth-child(3) 
{ 
    flex:0 0 20%; 
    background:cyan; 
} 

.example:nth-child(3) 
{ 
    position:absolute; 
    margin-top:120px; 
    margin-left:-120px; 
    width:120px; 
} 

.example img 
{ 
    width: 100%; 
    height: auto; 
    display: block; 
}

使用http://autoprefixer.github.io/支持跨瀏覽器。

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

在未來這將是禮貌，爲您提供codepen

來源

2016-01-17 02:56:16

不錯的使用flex！這仍然會導致像素舍入問題，但是，正確的？ –

我不知道@BrettDeWoody，但我會認爲看到圖像是100％寬，應該沒問題？ –

不幸的是，Flexbox [不是沒有像素舍入問題]（https://www.palantir.net/blog/responsive-design-s-dirty-little-secret）。 –

既然你不接受任何以前的答案，這裏是我打一個普拉克：

http://plnkr.co/edit/di1vBRu0pzzLDbWRtp2K?p=preview

CSS 
.example img { 
    width: 200px; 
    height: 200px; 
    display: block; 
    float: left; 
    border:1px solid; 
} 

.example2 img { 
    width: 100px; 
    height: 100px; 
    display: block; 
    border:1px solid; 
} 


.example3 img { 
    width: 200px; 
    height: 200px; 
    position:absolute; 
    top:8px; 
    right:321px; 
    border:1px solid; 
} 

HTML 

<div class="examples"> 
    <div class="example"><img src="examples/1.jpg" /></div> 
    <div class="example2"><img src="examples/2.jpg" /></div> 
    <div class="example2"><img src="examples/3.jpg" /></div> 
    <div class="example3"><img src="examples/4.jpg" /></div> 
</div>

來源

2016-01-17 03:37:48 karmakula

我已經做了一個沒有觸及html，和一個我添加了一個額外的包裝的di v 2和3.具有額外包裝的那個是更好的解決方案，尤其是如果這必須有響應。

.examples{display: -ms-flexbox; 
display: -webkit-flex; 
display: flex; 
-webkit-flex-direction: row; 
-ms-flex-direction: row; 
flex-direction: row; 
-webkit-flex-wrap: nowrap; 
-ms-flex-wrap: nowrap; 
flex-wrap: nowrap; 
-webkit-justify-content: center; 
-ms-flex-pack: center; 
justify-content: center; 
-webkit-align-content: center; 
-ms-flex-line-pack: center; 
align-content: center; 
-webkit-align-items: center; 
-ms-flex-align: center; 
align-items: center; 
box-shadow:9px 12px 8px grey; 
height:210px;width:50%;margin:10px auto; 
}

鏈接codepen

http://codepen.io/damianocel/pen/GoMXaB

來源

2016-01-17 04:20:06

如何在CSS中實現圖庫

回答

相關問題