我需要图像卡像 pinterest 一样对齐。我附上了一张我想要让它做的事情的图片。
============================================= === 元素图片 ================================================ -->
.project-images .section-heading .title {
padding-bottom: 0px;
font-size: 250%;
line-height: 1.1;
font-weight: 400;
color: #1c1c1c;
text-transform: uppercase;
}
.project-images {
padding: 80px
}
.project-imgsub {
padding-bottom: 50px;
margin-top: 0;
color: #666;
font-size: 30px;
font-weight: 700;
letter-spacing: 1px;
}
.project-images .service-parts .block {
margin-bottom: 0px;
text-align: center;
}
.project-images .service-parts .block i {
font-size: 35px;
color: #00bfff;
}
.project-images .service-parts .block p {
padding: 0 8px;
font-size: 14px;
color: #777;
line-height: 1.7;
}
.project-images figure .buttons {
position: absolute;
top: 45%;
left: 13%;
}
.project-images h2 {
padding: 20px;
}
.project-images .img-cust {
display: inline-block;
}
figure {
background: #fff;
margin-bottom: 45px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.22), 0 2px 10px 0 rgba(0, 0, 0, 0.22);
}
figure .img-wrapper {
position: relative;
overflow: hidden;
}
figure img {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition: -webkit-transform 400ms;
transition: transform 400ms;
}
figure:hover img {
-webkit-transform: scale3d(1.2, 1.2, 1);
transform: scale3d(1.2, 1.2, 1);
}<section class="project-images">
<div class="container">
<div class="section-heading">
<h3 class="title wow fadeInDown" data-wow-delay=".3s"> TEXT </h3>
<h3 class="project-imgsub">Images and Details</h3>
<div class="row">
<div class="col-sm-4 ">
<figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
<figcaption>
<h2>TITLE TEXT</h2>
<p class="para">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac laoreet magna, nec posuere leo. Aenean justo nibh, ultricies consequat faucibus in, molestie vel metus. Pellentesque dignissim, nisl in luctus ornare, ex est tristique eros, sed auctor diam justo et tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lobortis nibh a nisl malesuada scelerisque. Vivamus malesuada nisi nisi, eu tempor ipsum finibus vitae. Ut at leo lacus.
</p>
</figcaption>
<div class="img-wrapper">
<img src="images/hid.png " class="img-responsive" >
</div>
</figure>
</div>
<div class="row">
<div class="col-sm-4 ">
<figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
<figcaption>
<h2>TITLE Text text text text</h2>
<p class="para">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac laoreet magna, nec posuere leo. Aenean justo nibh, ultricies consequat faucibus in, molestie vel metus. Pellentesque dignissim, nisl in luctus ornare, ex est tristique eros, sed auctor diam justo
</p>
</figcaption>
<div class="img-wrapper">
<img src="images/hid.png " class="img-responsive" >
</div>
</figure>
</div>
<div class="row">
<div class="col-sm-4 ">
<figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
<figcaption>
<h2> TITLE Text tex text</h2>
<p class="para">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac laoreet magna,
</p>
</figcaption>
<div class="img-wrapper">
<img src="images/hid.png " class="img-responsive" >
</div>
</figure>
</div>
<div class="row">
<div class="col-sm-4">
<figure class="wow fadeInLeft animated portfolio-item res-wall" data-wow-duration="500ms" data-wow-delay="0ms">
<figcaption>
<h2>TITLE Text text text text</h2>
<p class="para">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac laoreet magna, nec posuere leo. Aenean justo nibh, ultricies consequat faucibus in, molestie vel metus. Pellentesque dignissim, nisl in luctus ornare, ex est tristique eros, sed auctor diam justo et tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lobortis nibh a nisl malesuada scelerisque. Vivamus malesuada
<p>
</figcaption>
<div class="img-wrapper">
<img src="images/hid.png " class="img-responsive" >
</div>
</figure>
</div>
<div class="row">
<div class="col-sm-4">
<figure class="wow fadeInLeft animated portfolio-item res-wall" data-wow-duration="500ms" data-wow-delay="0ms">
<figcaption>
<h2>TITLE TEXT TEXT TEXT</h2>
<p class="para">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac laoreet magna, nec posuere leo. Aenean justo nibh, ultricies consequat faucibus in, molestie vel metus. Pellentesque dignissim, nisl in luctus ornare, ex est tristique eros, sed auctor diam justo et tellus. Lorem ipsum dolor sit amet, consectetur
</p>
</figcaption>
<div class="img-wrapper">
<img src="images/hid.png " class="img-responsive" >
</div>
</figure>
</div>
<div class="row">
<div class="col-sm-4">
<figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
<figcaption>
<h2> TITLE TEXT TEXT </h2>
<p class="para">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac laoreet magna,
</p>
</figcaption>
<div class="img-wrapper">
<img src="images/hid.png " class="img-responsive" >
</div>
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>最佳答案
如果您想要图像中的布局，它称为提到的 Masonry 布局 here - how-to-create-grid-tile-view-with-css还有here - css-floating-divs-at-variable-heights两个答案都建议使用 jQuery Masonry但您也可以使用列。
但作为替代方案，您可以使用等高列，就像我在下面的代码中所做的那样。
div {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
.flex{
display: flex;
flex-wrap: wrap;
margin: auto;
}
.col-sm-4{
max-width: 100%;
width: 33%;
display: flex;
}
.project-images .section-heading .title {
padding-bottom: 0px;
font-size: 250%;
line-height: 1.1;
font-weight: 400;
color: #1c1c1c;
text-transform: uppercase;
}
.project-images {
padding: 80px
}
.project-imgsub {
padding-bottom: 50px;
margin-top: 0;
color: #666;
font-size: 30px;
font-weight: 700;
letter-spacing: 1px;
}
.project-images .service-parts .block {
margin-bottom: 0px;
text-align: center;
}
.project-images .service-parts .block i {
font-size: 35px;
color: #00bfff;
}
.project-images .service-parts .block p {
padding: 0 8px;
font-size: 14px;
color: #777;
line-height: 1.7;
}
.project-images figure .buttons {
position: absolute;
top: 45%;
left: 13%;
}
.project-images h2 {
padding: 20px 20px 0px 20px;
text-align: center;
margin-bottom: 0;
}
.project-images .img-cust {
display: inline-block;
}
p.para {
padding: 0 20px 0 20px;
text-align: center;
}
figure {
background: #fff;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.22), 0 2px 10px 0 rgba(0, 0, 0, 0.22);
-webkit-margin-end: 0;
-webkit-margin-start: 0;
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
margin: 10px 10px 5px 10px;
}
figure .img-wrapper {
position: relative;
overflow: hidden;
}
figure img {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition: -webkit-transform 400ms;
transition: transform 400ms;
width: 100%;
max-width: 100%;
}
figure:hover img {
-webkit-transform: scale3d(1.2, 1.2, 1);
transform: scale3d(1.2, 1.2, 1);
}<section class="project-images">
<div class="container">
<div class="section-heading">
<h3 class="title wow fadeInDown" data-wow-delay=".3s"> TEXT </h3>
<h3 class="project-imgsub">Images and Details</h3>
<div class="row flex">
<div class="col-sm-4 ">
<figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
<figcaption>
<h2>TITLE TEXT</h2>
<p class="para">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac laoreet magna, nec po
</p>
</figcaption>
<div class="img-wrapper">
<img src="" alt="img-here" class="img-responsive" >
</div>
</figure>
</div>
<div class="col-sm-4 ">
<figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
<figcaption>
<h2>TITLE TEXT</h2>
<p class="para">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac laoreet magna, nec posuere leo. Aenean justo nibh, ultricies consequat faucibus in, molestie vel metus. Pellentesque dignissim, nisl in luctus ornare, ex est tristique er
</p>
</figcaption>
<div class="img-wrapper">
<img src="" alt="img-here" class="img-responsive" >
</div>
</figure>
</div>
<div class="col-sm-4 ">
<figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
<figcaption>
<h2>TITLE TEXT</h2>
<p class="para">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac laoreet magna, nec posuere leo. Aenean justo nibh, ultricies consequat faucibus in, molestie vel metus. Pellentesque dignissim, nisl in luctus ornare, ex est tristiqu
</p>
</figcaption>
<div class="img-wrapper">
<img src="" alt="img-here" class="img-responsive" >
</div>
</figure>
</div>
<div class="col-sm-4 ">
<figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
<figcaption>
<h2>TITLE TEXT</h2>
<p class="para">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac laoreet magna, nec posuere leo. Aenean justo nibh, ultricies consequat faucibus in, molestie vel metus. Pellentesque dignissim, nisl in luctus ornare, ex est tristiqu
</p>
</figcaption>
<div class="img-wrapper">
<img src="" alt="img-here" class="img-responsive" >
</div>
</figure>
</div>
<div class="col-sm-4 ">
<figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
<figcaption>
<h2>TITLE TEXT</h2>
<p class="para">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac laoreet magna, nec posuere leo. Aenean justo nibh, ultricies consequat faucibus in, molestie vel metus. Pellentesque dignissim, nisl in luctus ornare, ex est tristiqu
</p>
</figcaption>
<div class="img-wrapper">
<img src="" alt="img-here" class="img-responsive" >
</div>
</figure>
</div>
<div class="col-sm-4 ">
<figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
<figcaption>
<h2>TITLE TEXT</h2>
<p class="para">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac laoreet magna, nec posuere leo. Aenean justo nibh, ultricies consequat faucibus in, molestie vel metus. Pellentesque dignissim, nisl in luctus ornare, ex est tristiqu
</p>
</figcaption>
<div class="img-wrapper">
<img src="" alt="img-here" class="img-responsive" >
</div>
</figure>
</div>
</div>
</div>
</div>
</section>关于html - 我需要图像卡像 pinterest 一样对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36704071/