照片网格布局CSS [英] Photo-Grid Layout CSS

查看：118
本文介绍了照片网格布局CSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

所以我有这个photogrid与CSS和它的工作精细除了我想要它显示如下：

  1 | 2 | 3 
 4 | 5 | 6

而不是

  1 | 3 | 5 
 2 | 4 | 6

我搞砸了css一段时间，但我不能得到它。以下是代码：



HTML： 

 < section id =photos> 
< img src =imgs / logo1.jpgalt => 
< img src =imgs / logo2.pngalt => 
< img src =imgs / logo3.pngalt => 
< img src =imgs / logo4.jpgalt => 
< / section>

CSS 

  #photos {
 / *防止垂直间隙* / 
 line-height：0; 
 
 -webkit-column-count：5; 
 -webkit-column-gap：0px; 
 -moz-column-count：5; 
 -moz-column-gap：0px; 
 column-count：5; 
 column-gap：0px; 
} 
 
 #photos img {
 / *只是在有内联属性的情况下* / 
 width：100％！important; 
 height：auto！important; 
} 
 
 @media（max-width：1200px）{
 #photos {
 -moz-column-count：4; 
 -webkit-column-count：4; 
 column-count：4; 
} 
} 
 @media（max-width：1000px）{
 #photos {
 -moz-column-count：3; 
 -webkit-column-count：3; 
 column-count：3; 
} 
} 
 @media（max-width：800px）{
 #photos {
 -moz-column-count：2; 
 -webkit-column-count：2; 
 column-count：2; 
} 
} 
 @media（max-width：400px）{
 #photos {
 -moz-column-count：1; 
 -webkit-column-count：1; 
 column-count：1; 
} 
}


解决方案

建议通过CSS更好地控制元素的顺序是使用 flexbox 。它的相关flex属性是 flex-direction 和 order 。


$ b b

Flex Direction示例：



  .container {display：-webkit-flex ; / * Safari * / display：flex;轮廓：1px黑色;颜色：白色; font-size：2em;}。row {-webkit-flex-direction：row; / * Safari 6.1+ * / flex-direction：row; background：tomato;}。row-reverse {-webkit-flex-direction：row-reverse; / * Safari 6.1+ * / flex-direction：row-reverse; background：gold;}。column {-webkit-flex-direction：column; / * Safari 6.1+ * / flex-direction：column; background：hotpink;}。column-reverse {-webkit-flex-direction：column-reverse; / * Safari 6.1+ * / flex-direction：column-reverse; background：purple;}。container div {padding：5px;轮廓：1px实心青色; }  

 < div class =container row> < div> 1< / div>< div div> 2< / div>< div> 3< / div>< div> 4< / div>< div> 5< / div>< ; / div>< / div>< div class =container row-reverse>< div> 1< / div>< div> 2< / div>< div> 3< / div>< ; div> 4< / div>< div> 5< / div>< div> 6< / div>< / div>< div class =container column>< div> 1& ;< div> 2< / div>< / div>< div /> 2< / div>< / div> 2< / div>< / div> 3< / div>< div> 4< / div>< ;< div class =container column-reverse>< div> 1< / div>< div> 2< / div>< div> 3< / div>< div> 4& < div> 5< / div>< div> 6< / div>< / div>

b
$ b

Flex订单示例：



  .orderA， .orderB，.orderC {outline：1px dotted black;显示：-webkit-flex; / * Safari * / display：flex; font-size：2em;}。orderA .a {-webkit-order：1; order：1; } .orderA .b {-webkit-order：2;顺序：2; } .orderA .c {-webkit-order：3; order：3; } .orderA .d {-webkit-order：4;顺序：4; } .orderA .e {-webkit-order：5;顺序：5; } .orderA .f {-webkit-order：6;顺序：6; } .orderB .a {-webkit-order：6;顺序：6; } .orderB .b {-webkit-order：5;顺序：5; } .orderB .c {-webkit-order：4;顺序：4; } .orderB .d {-webkit-order：3; order：3; } .orderB .e {-webkit-order：2;顺序：2; } .orderB .f {-webkit-order：1; order：1; } .orderC .a {-webkit-order：2;顺序：2; } .orderC .b {-webkit-order：4;顺序：4; } .orderC .c {-webkit-order：6;顺序：6; } .orderC .d {-webkit-order：1; order：1; } .orderC .e {-webkit-order：3; order：3; } .orderC .f {-webkit-order：5;顺序：5; } .orderA div {background：skyblue;轮廓：1px solid hotpink; padding：5px;}。orderB div {background：gold;轮廓：1px solid hotpink; padding：5px;}。orderC div {background：greenyellow;轮廓：1px solid hotpink; padding：5px;}  

 < div class =orderA >< div class = a> 1< / div>< div class = b> 2< / div>< div class = c> 3< / div>< div class = d> 4< / div ;< div class = e> 5< / div>< div class = f> 6< / div>< / div>< div class =orderB>< div class = a& div>< div class = b> 2< / div>< div class = c> 3< / div>< div class = d> 4< / div>< div class = e> 5& < div class = f> 6< / div>< / div>< div class =orderC>< div class = a> 1< / div>< div class = b> 2& ;< div class = c> 3< / div>< div class = d> 4< / div>< div class = e> 5< / div>< div class = f> 6< / div> ; / div>



/ strong>其中 flex-direction 和 order 可以轻松应用（如果需要）：



  body {width：100％;高度：100vh; margin：0;}。container {display：-webkit-flex; / * Safari * / display：flex -webkit-flex-wrap：wrap; flex-wrap：wrap; -webkit-justify-content：space-around; / * Safari 6.1+ * / justify-content：space-around;}。container div {-webkit-flex：0 0 calc（33.3％ -  20px）; / * Safari 6.1+ * / -ms-flex：0 0 calc（33.3％ -  20px）; / * IE 10 * / flex：0 0 calc（33.3％ -  20px）;背景：薰衣草border：2px solid black; box-sizing：border-box; margin：10px; font-size：2em; text-align：center;}  

 < div class = container> < div> 1< img src =http://i.imgur.com/ufh1gnC.pngalt = img>< / div> < div> 2< img src =http://i.imgur.com/ufh1gnC.pngalt = img>< / div> < div> 3< img src =http://i.imgur.com/ufh1gnC.pngalt = img>< / div> < div> 4< img src =http://i.imgur.com/ufh1gnC.pngalt = img>< / div> < div> 5< img src =http://i.imgur.com/ufh1gnC.pngalt = img>< / div> < div> 6< img src =http://i.imgur.com/ufh1gnC.pngalt = img>< / div>< / div>


So I have this photogrid made with CSS and its working fine except I want it to display like this:

1 | 2 | 3
4 | 5 | 6

instead of

1 | 3 | 5
2 | 4 | 6

I messed around with the css for awhile but I couldn't get it right. Here's the code:

HTML:

<section id="photos">
<img src="imgs/logo1.jpg" alt="">
<img src="imgs/logo2.png" alt="">
<img src="imgs/logo3.png" alt="">
<img src="imgs/logo4.jpg" alt="">
</section>

CSS

#photos {
  /* Prevent vertical gaps */
  line-height: 0;

  -webkit-column-count: 5;
  -webkit-column-gap:   0px;
  -moz-column-count:    5;
  -moz-column-gap:      0px;
  column-count:         5;
  column-gap:           0px;  
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1200px) {
  #photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}

解决方案

My suggestion to have a bigger control of the element's order through CSS is to use flexbox. The relevant flex properties for it are flex-direction and order.

Flex Direction Examples:

.container {
    display: -webkit-flex; /* Safari */    
    display: flex;
    outline: 1px dashed black;
    color: white;
    font-size: 2em;
}

.row {
    -webkit-flex-direction: row; /* Safari 6.1+ */
    flex-direction: row;
    background: tomato;
}

.row-reverse {
    -webkit-flex-direction: row-reverse; /* Safari 6.1+ */
    flex-direction: row-reverse;
    background: gold;
}

.column {
    -webkit-flex-direction: column; /* Safari 6.1+ */
    flex-direction: column;
    background: hotpink;
}

.column-reverse {
    -webkit-flex-direction: column-reverse; /* Safari 6.1+ */
    flex-direction: column-reverse;
  background: purple;
}

.container div {
    padding: 5px;
    outline: 1px solid cyan;  
}

<div class="container row">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div>
</div>

<div class="container row-reverse">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div>
</div>

<div class="container column">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div>
</div>

<div class="container column-reverse">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div>
</div>

Flex Order Examples:

.orderA, .orderB, .orderC {
  outline: 1px dashed black;
  display: -webkit-flex; /* Safari */
  display: flex;
  font-size: 2em;
}

.orderA .a {
  -webkit-order: 1;
  order: 1;  
}

.orderA .b {
  -webkit-order: 2;
  order: 2;  
}

.orderA .c {
  -webkit-order: 3;
  order: 3;  
}

.orderA .d {
  -webkit-order: 4;
  order: 4;  
}

.orderA .e {
  -webkit-order: 5;
  order: 5;  
}

.orderA .f {
  -webkit-order: 6;
  order: 6;  
}

.orderB .a {
  -webkit-order: 6;
  order: 6;  
}

.orderB .b {
  -webkit-order: 5;
  order: 5;  
}

.orderB .c {
  -webkit-order: 4;
  order: 4;  
}

.orderB .d {
  -webkit-order: 3;
  order: 3;  
}

.orderB .e {
  -webkit-order: 2;
  order: 2;  
}

.orderB .f {
  -webkit-order: 1;
  order: 1;  
}

.orderC .a {
  -webkit-order: 2;
  order: 2;  
}

.orderC .b {
  -webkit-order: 4;
  order: 4;  
}

.orderC .c {
  -webkit-order: 6;
  order: 6;  
}

.orderC .d {
  -webkit-order: 1;
  order: 1;  
}

.orderC .e {
  -webkit-order: 3;
  order: 3;  
}

.orderC .f {
  -webkit-order: 5;
  order: 5;  
}

.orderA div {
  background: skyblue;
  outline: 1px solid hotpink;
  padding: 5px;
}

.orderB div {
  background: gold;
  outline: 1px solid hotpink;
  padding: 5px;
}

.orderC div {
  background: greenyellow;
  outline: 1px solid hotpink;
  padding: 5px;
}

<div class="orderA">
<div class=a>1</div><div class=b>2</div><div class=c>3</div><div class=d>4</div><div class=e>5</div><div class=f>6</div>
</div>

<div class="orderB">
<div class=a>1</div><div class=b>2</div><div class=c>3</div><div class=d>4</div><div class=e>5</div><div class=f>6</div>
</div>

<div class="orderC">
<div class=a>1</div><div class=b>2</div><div class=c>3</div><div class=d>4</div><div class=e>5</div><div class=f>6</div>
</div>

A Flex Grid of Images where flex-direction and order can be easily applied (if needed):

body {
  width: 100%;
  height: 100vh;
  margin: 0;
}

.container {
    display: -webkit-flex; /* Safari */    
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-around; /* Safari 6.1+ */    
    justify-content: space-around;
}

.container div {
  -webkit-flex: 0 0 calc(33.3% - 20px); /* Safari 6.1+ */
  -ms-flex: 0 0 calc(33.3% - 20px); /* IE 10 */ 
  flex: 0 0 calc(33.3% - 20px);  
  background: lavender;
  border: 2px solid black;
  box-sizing: border-box;
  margin: 10px;
  font-size: 2em;
  text-align: center;
}

<div class="container">
  <div>1 <img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div>2 <img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div>3 <img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div>4 <img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div>5 <img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div>6 <img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
</div>

这篇关于照片网格布局CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆