简介:我还在学习,所以请保持温柔。
我试图让我的图像相应地缩放,我希望它们能够水平地显示彼此相邻的位置。我使用白色空间使其工作:nowrap;但它显然没有得到很好的支持。有没有其他选择?
* {
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
ul {
list-style-type: none;
}
section.gallery {
width: 100%;
padding: 0.3125em;
white-space: nowrap;
}
section.gallery h2 {
display: none;
}
section.gallery ul {
width: 100%;
padding: 0;
}
section.gallery li {
display: inline-block;
width: 33%;
padding: 0.3125em;
}
section.gallery li:nth-of-type(1), section.gallery li:nth-of-type(5) {
display: none;
}

<section class="gallery">
<h2>Our Puppies</h2>
<ul class="puppies">
<li><img src="img/pup_1.png" width="500" height="500" alt="3 week old sable puppy"></li>
<li><img src="img/pup_2.png" width="500" height="500" alt="5 week old blue puppy"></li>
<li><img src="img/pup_3.png" width="500" height="500" alt="9 week old black-and-tan puppy"></li>
<li><img src="img/pup_4.png" width="500" height="500" alt="5 week old black-and-tan puppy"></li>
<li><img src="img/pup_4.png" width="500" height="500" alt="5 week old black-and-tan puppy"></li>
</ul>
</section>
&#13;
答案 0 :(得分:0)
.container {
max-width: 100%;
display: flex;
flex-wrap: wrap;
}
.image {
width: 33.33%;
}
img {
width: 100%;
}
&#13;
<div class="container">
<div class="image"><img src="http://via.placeholder.com/350x150" alt=""></div>
<div class="image"><img src="http://via.placeholder.com/350x150" alt=""></div>
<div class="image"><img src="http://via.placeholder.com/350x150" alt=""></div>
<div class="image"><img src="http://via.placeholder.com/350x150" alt=""></div>
<div class="image"><img src="http://via.placeholder.com/350x150" alt=""></div>
<div class="image"><img src="http://via.placeholder.com/350x150" alt=""></div>
</div>
&#13;
答案 1 :(得分:0)
我认为你正在寻找以下观点。
您可以使用flex
获取
工作小提琴
<强> fiddle code 强>
您可以在此处阅读有关flex A complete guide of flex的信息。
section.gallery ul {
width: 100%;
padding: 0;
display:flex;
flex-flow:row wrap;
justify-content:flex-start;
align-items:center;
}
section.gallery li {
flex:1 0 0;
padding: 0.3125em;
}
* {
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
ul {
list-style-type: none;
}
section.gallery {
width: 100%;
padding: 0.3125em;
white-space: nowrap;
}
section.gallery h2 {
display: none;
}
section.gallery ul {
width: 100%;
padding: 0;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;
}
section.gallery li {
flex: 1 0 0;
padding: 0.3125em;
}
section.gallery li:nth-of-type(1),
section.gallery li:nth-of-type(5) {
display: none;
}
&#13;
<section class="gallery">
<h2>Our Puppies</h2>
<ul class="puppies">
<li><img src="http://lorempixel.com/400/200" width="500" height="500" alt="3 week old sable puppy"></li>
<li><img src="http://lorempixel.com/400/200" width="500" height="500" alt="5 week old blue puppy"></li>
<li><img src="http://lorempixel.com/400/200" width="500" height="500" alt="9 week old black-and-tan puppy"></li>
<li><img src="http://lorempixel.com/400/200" width="500" height="500" alt="5 week old black-and-tan puppy"></li>
<li><img src="http://lorempixel.com/400/200" width="500" height="500" alt="5 week old black-and-tan puppy"></li>
</ul>
</section>
&#13;