照片网格布局CSS [英] Photo-Grid Layout 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>
$ p>
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屋!