Question

我需要图像卡像pinterest一样对齐。我附上了我想要让它做的事情的图像。

=============================================== === 项目图片 ================================================== - ＆GT;

[2J

.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);
    }

Answer 1

JSFiddle

如果您想要图片中的布局，则称为here - how-to-create-grid-tile-view-with-css here - css-floating-divs-at-variable-heights的砌体布局，jQuery Masonry两个答案都建议使用http://i.stack.imgur.com/Ck0s0.png，但您也可以使用列。

但作为替代方案，您可以像我在下面的代码中那样使用相同高度的列。

div {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;
}

＆＃13;

.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);
    }

＆＃13;

<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>

＆＃13;

我需要图像卡像pinterest一样对齐

1 个答案: