在 chrome 中，我的列无法正常工作

【问题标题】：In chrome my columns not working properly在 chrome 中，我的列无法正常工作
【发布时间】：2017-03-29 01:03:50
【问题描述】：

我在 Firefox 中使用 columns 工作正常

在 chrome 中无法完美运行

https://jsfiddle.net/ab3taj6m/

【问题讨论】：

    标签： html css


    【解决方案1】：

    从.col-sm-3 中删除display: inline

    .stu-li-heading {
  color: #c89647;
  font-size: 20px;
  font-weight: 300;
  margin: 0;
  padding: 14px 0 12px;
}

.student-gall-list.border-effect li:nth-child(1) {
  float: left;
  width: 66.6%;
  height: 140px;
  overflow: hidden;
}

.student-gall-list.border-effect li:nth-child(1) img {
  min-height: 140px;
}

.student-gall-list.border-effect li {
  background: #222222 none repeat scroll 0 0;
  float: left;
  height: 70px;
  width: 33.2%;
  overflow: hidden;
}

.student-gall-list.border-effect li img {
  min-height: 70px;
}

.student-gall-list.border-effect li:nth-child(4),
.student-gall-list.border-effect li:nth-child(5),
.student-gall-list.border-effect li:nth-child(6) {
  width: 33.333%;
  position: relative;
}

.gallery-more-no h3 {
  font-weight: 300;
  margin: 0;
  width: 100%;
}

.stu-list-tags {
  display: inline-block;
  padding: 0 10px 12px;
  width: 100%;
}

.student-gall-list {
  padding: 0;
}

.student-gall-list.border-effect li img {
  width: 100%;
}

.student-gall-list figure img {
  width: 100%;
}

.gallery-more-no {
  background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
  color: #ffffff;
  align-items: center;
  height: 100%;
  left: 0;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%;
  display: flex;
}

.block-width.gallery-grid-st {
  columns: 4 auto;
}

.col-sm-3-add.in-view {
  animation: myfirst 1.5s linear alternate;
  -webkit-animation: myfirst 1.5s linear alternate;
}


.col-sm-3-add > *:last-child {
  margin-bottom: 20px;
}

@-webkit-keyframes myfirst {
  from {
    opacity: 0;
    transform: translate3d(0px, 150%, 0px);
    -weblit-transform: translate3d(0px, 150%, 0px);
  }
  to {
    opacity: 1;
    transform: translate3d(0px, 0%, 0px);
    -weblit-transform: translate3d(0px, 0px, 0px);
  }
}

.student-page-banner {
  background: rgba(0, 0, 0, 0) url("../img/banner-student-page.jpg") no-repeat scroll center center;
}

.middle-pop.modal .modal-dialog {
  align-items: center;
  display: flex !important;
  height: 100%;
}

.center-model-cover {
  background: #fff;
  position: relative;
  width: 100%;
}

.model-student-gallery .modal-dialog {
  margin: 0 auto;
  line-height: 0;
}

.slider-student-p {
  margin: 0 0 0 -15px;
}

.detail-slider-pop {
  margin: 0 0 0 -15px;
}

.com-name span {
  border-radius: 50%;
  display: inline-block;
  float: left;
  height: 34px;
  margin: 0 8px 0 0;
  overflow: hidden;
  width: 34px;
}

.com-name span img {
  min-height: 34px;
}

.com-name {
  color: #444;
  font-size: 17px;
  line-height: 34px;
  margin: 40px 0 20px;
}

.detail-slider-pop p {
  color: #888888;
  font-size: 13px;
  line-height: 22px;
}

.close-btn svg {
  fill: #333333;
  width: 22px;
}

.close-btn {
  line-height: 0;
  position: absolute;
  right: 10px;
  top: 0;
  z-index: 20;
}

.list-img-s img {
  width: 100%;
}

.slider-student-p .owl-buttons .owl-prev,
.slider-student-p .owl-buttons .owl-next {
  color: #000000;
  font-size: 0;
  left: 8px;
  position: absolute;
  top: 48%;
  z-index: 100;
}


/*************************** add nomber list 2***************************/

.padding-add-0 {
  padding: 0px;
}

.student-gall-sec-img-st li {
  display: flex;
  float: left;
  min-height: 167px;
  position: relative;
  width: 50%;
  overflow: hidden;
}

.student-gall-sec-img-st li img {
  height: 100%;
  max-width: inherit;
  padding: 0;
  position: absolute;
}

.add-list-s-set3 li:last-child {
  min-height: 100px !important;
  overflow: hidden;
  width: 100%;
}

.add-list-s-set3 li:last-child img {
  height: auto;
  max-width: 100%;
}
    <div class="container">
  <div class="block-width gallery-grid-st animation-section">


    <div class="col-sm-3-add in-view">
      <a data-toggle="modal" data-target=".student-gallery-popup2">
        <div class="student-gall-list border-effect">
          <ul>
            <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li>
            <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li>
            <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li>
            <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li>
            <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li>
            <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img">
              <div class="gallery-more-no">
                <h3> +2 </h3></div>
            </li>
          </ul>
          <div class="stu-list-tags">
            <h4 class="stu-li-heading">ONGC Batch 2017</h4>
            <p> #mercurydiaries &nbsp; #corporatebatch &nbsp; #learnalot &nbsp;#ongcfebbatch2017 </p>
          </div>
        </div>
      </a>
    </div>


    <div class="col-sm-3-add in-view">
      <div class="student-gall-sec-img-st padding-add-0 border-effect">
        <ul>
          <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li>
          <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li>
        </ul>

        <div class="stu-list-tags">
          <h4 class="stu-li-heading">ONGC Batch 2017</h4>
          <p> #mercurydiaries &nbsp; #corporatebatch &nbsp; #learnalot &nbsp;#ongcfebbatch2017 </p>
        </div>
      </div>
    </div>




    <div class="col-sm-3-add in-view">
      <div class="student-gall-list border-effect">
        <figure> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt=""> </figure>
        <div class="stu-list-tags">
          <h4 class="stu-li-heading">ONGC Batch 2017</h4>
          <p> #mercurydiaries &nbsp; #corporatebatch &nbsp; #learnalot &nbsp;#ongcfebbatch2017 </p>
        </div>
      </div>
    </div>

    <div class="col-sm-3-add in-view">

      <div class="student-gall-list border-effect">
        <figure> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt=""> </figure>
        <div class="stu-list-tags">
          <h4 class="stu-li-heading">ONGC Batch 2017</h4>
          <p> #mercurydiaries &nbsp; #corporatebatch &nbsp; #learnalot &nbsp;#ongcfebbatch2017 </p>
        </div>
      </div>

    </div>






  </div>
</div>

    【讨论】：

    • 感谢重播。如果您有相同的其他选择，那对我来说是击球手
    • @Nito 对不起，我不明白你的评论。
    • @Micheal ，在 chrome 中它显示的是第 3 列而不是第 4 列。
    • @Nito 哦，我明白了。它只是在某些宽度上，这似乎是因为.col-sm-3 上的边距。我为该 col .col-sm-3-add &gt; *:last-child { margin-bottom: 20px; } 的最后一个孩子添加了一个底部边距，这应该会更好。
    【解决方案2】：

    将display:flex 添加到.block-width.gallery-grid-st。 作品here，带有浏览器前缀。

    .stu-li-heading {
	color: #c89647;
	font-size: 20px;
	font-weight: 300;
	margin: 0;
	padding: 14px 0 12px;
}
.student-gall-list.border-effect li:nth-child(1) {
	float: left;
	width: 66.6%;
	height: 140px;
	overflow: hidden;
}
.student-gall-list.border-effect li:nth-child(1) img {
	min-height: 140px;
}
.student-gall-list.border-effect li {
	background: #222222 none repeat scroll 0 0;
	float: left;
	height: 70px;
	width: 33.2%;
	overflow: hidden;
}
.student-gall-list.border-effect li img {
	min-height: 70px;
}
.student-gall-list.border-effect li:nth-child(4), .student-gall-list.border-effect li:nth-child(5), .student-gall-list.border-effect li:nth-child(6) {
	width: 33.333%;
	position: relative;
}
.gallery-more-no h3 {
	font-weight: 300;
	margin: 0;
	width: 100%;
}
.stu-list-tags {
	display: inline-block;
	padding: 0 10px 12px;
	width: 100%;
}
.student-gall-list {
	padding: 0;
}
.student-gall-list.border-effect li img {
	width: 100%;
}
.student-gall-list figure img {
	width: 100%;
}
.gallery-more-no {
	background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
	color: #ffffff;
	align-items: center;
	height: 100%;
	left: 0;
	position: absolute;
	text-align: center;
	top: 0;
	width: 100%;
	display: flex;
}
.col-sm-3-add {
	margin: 0 0 20px;
}
.block-width.gallery-grid-st {
  display: flex;
  -webkit-columns: 4 auto;
  -moz-columns: 4 auto;
	columns: 4 auto;
}
.col-sm-3-add {
	display: inline-block;
	margin: 0 0 20px;
	width: 100%;
}
.col-sm-3-add.in-view {
	animation: myfirst 1.5s linear alternate;
	-webkit-animation: myfirst 1.5s linear alternate;
}
 @-webkit-keyframes myfirst {
 from {
opacity:0;
transform: translate3d(0px, 150%, 0px);
-weblit-transform: translate3d(0px, 150%, 0px);
}
to {
	opacity: 1;
	transform: translate3d(0px, 0%, 0px);
	-weblit-transform: translate3d(0px, 0px, 0px);
}
}
.student-page-banner {
	background: rgba(0, 0, 0, 0) url("../img/banner-student-page.jpg") no-repeat scroll center center;
}
.middle-pop.modal .modal-dialog {
	align-items: center;
	display: flex !important;
	height: 100%;
}
.center-model-cover {
	background: #fff;
	position: relative;
	width: 100%;
}
.model-student-gallery .modal-dialog {
	margin: 0 auto;
	line-height: 0;
}
.slider-student-p {
	margin: 0 0 0 -15px;
}
.detail-slider-pop {
	margin: 0 0 0 -15px;
}
.com-name span {
	border-radius: 50%;
	display: inline-block;
	float: left;
	height: 34px;
	margin: 0 8px 0 0;
	overflow: hidden;
	width: 34px;
}
.com-name span img {
	min-height: 34px;
}
.com-name {
	color: #444;
	font-size: 17px;
	line-height: 34px;
	margin: 40px 0 20px;
}
.detail-slider-pop p {
	color: #888888;
	font-size: 13px;
	line-height: 22px;
}
.close-btn svg {
	fill: #333333;
	width: 22px;
}
.close-btn {
	line-height: 0;
	position: absolute;
	right: 10px;
	top: 0;
	z-index: 20;
}
.list-img-s img {
	width: 100%;
}
.slider-student-p .owl-buttons .owl-prev, .slider-student-p .owl-buttons .owl-next {
	color: #000000;
	font-size: 0;
	left: 8px;
	position: absolute;
	top: 48%;
	z-index: 100;
}

/*************************** add nomber list 2***************************/
.padding-add-0 { padding: 0px;}
.student-gall-sec-img-st li {
	display: flex;
    float: left;
	min-height: 167px;
    position: relative;
    width: 50%;
	overflow: hidden;
}
.student-gall-sec-img-st li img {
    height: 100%;
    max-width: inherit;
    padding: 0;
    position: absolute;
}
.add-list-s-set3 li:last-child {
    min-height: 100px !important;
    overflow: hidden;
    width: 100%;
}
.add-list-s-set3 li:last-child img{ height:auto;max-width: 100%; 
}
    <div class="container">
  <div class="block-width gallery-grid-st animation-section">
  
  
  <div class="col-sm-3-add in-view">
   <a data-toggle="modal" data-target=".student-gallery-popup2">
  <div class="student-gall-list border-effect">
  <ul>
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li> 
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li> 
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li>
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li>
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li>
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"> <div class="gallery-more-no"> <h3> +2 </h3></div></li>
  </ul>
  <div class="stu-list-tags">
  <h4 class="stu-li-heading">ONGC Batch 2017</h4>
  <p> #mercurydiaries &nbsp;   #corporatebatch  &nbsp; #learnalot &nbsp;#ongcfebbatch2017 </p>
  </div>
  </div>
  </a>
  </div>
  
  
  <div class="col-sm-3-add in-view">
  <div class="student-gall-sec-img-st padding-add-0 border-effect">
  <ul>
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li> 
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li> 
  </ul>
  
  <div class="stu-list-tags">
  <h4 class="stu-li-heading">ONGC Batch 2017</h4>
  <p> #mercurydiaries &nbsp;   #corporatebatch  &nbsp; #learnalot &nbsp;#ongcfebbatch2017 </p>
  </div>
  </div>
  </div>
  
  
  
  
  <div class="col-sm-3-add in-view">
  <div class="student-gall-list border-effect">
  <figure> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt=""> </figure>
  <div class="stu-list-tags">
  <h4 class="stu-li-heading">ONGC Batch 2017</h4>
  <p> #mercurydiaries &nbsp;   #corporatebatch  &nbsp; #learnalot &nbsp;#ongcfebbatch2017 </p>
  </div>
  </div>
  </div>
  
   <div class="col-sm-3-add in-view">
  
  <div class="student-gall-list border-effect">
  <figure> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt=""> </figure>
  <div class="stu-list-tags">
  <h4 class="stu-li-heading">ONGC Batch 2017</h4>
  <p> #mercurydiaries &nbsp;   #corporatebatch  &nbsp; #learnalot &nbsp;#ongcfebbatch2017 </p>
  </div>
  </div>
  
  </div>
  
  
  
  
  
  
  </div>
  </div>

    Source

    更新：使用此代码：

    .block-width.gallery-grid-st {
  display: flex;
  flex-wrap: wrap;
}
.col-sm-3-add {
  flex: 1 0 25%;
    margin: 0 0 20px;
    width: 100%;
}


    .stu-li-heading {
	color: #c89647;
	font-size: 20px;
	font-weight: 300;
	margin: 0;
	padding: 14px 0 12px;
}
.student-gall-list.border-effect li:nth-child(1) {
	float: left;
	width: 66.6%;
	height: 140px;
	overflow: hidden;
}
.student-gall-list.border-effect li:nth-child(1) img {
	min-height: 140px;
}
.student-gall-list.border-effect li {
	background: #222222 none repeat scroll 0 0;
	float: left;
	height: 70px;
	width: 33.2%;
	overflow: hidden;
}
.student-gall-list.border-effect li img {
	min-height: 70px;
}
.student-gall-list.border-effect li:nth-child(4), .student-gall-list.border-effect li:nth-child(5), .student-gall-list.border-effect li:nth-child(6) {
	width: 33.333%;
	position: relative;
}
.gallery-more-no h3 {
	font-weight: 300;
	margin: 0;
	width: 100%;
}
.stu-list-tags {
	display: inline-block;
	padding: 0 10px 12px;
	width: 100%;
}
.student-gall-list {
	padding: 0;
}
.student-gall-list.border-effect li img {
	width: 100%;
}
.student-gall-list figure img {
	width: 100%;
}
.gallery-more-no {
	background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
	color: #ffffff;
	align-items: center;
	height: 100%;
	left: 0;
	position: absolute;
	text-align: center;
	top: 0;
	width: 100%;
	display: flex;
}
.col-sm-3-add {
	margin: 0 0 20px;
}
.block-width.gallery-grid-st {
  display: flex;
  flex-wrap: wrap;
}
.col-sm-3-add {
  flex: 1 0 25%;
	margin: 0 0 20px;
	width: 100%;
}
.col-sm-3-add.in-view {
	animation: myfirst 1.5s linear alternate;
	-webkit-animation: myfirst 1.5s linear alternate;
}
 @-webkit-keyframes myfirst {
 from {
opacity:0;
transform: translate3d(0px, 150%, 0px);
-weblit-transform: translate3d(0px, 150%, 0px);
}
to {
	opacity: 1;
	transform: translate3d(0px, 0%, 0px);
	-weblit-transform: translate3d(0px, 0px, 0px);
}
}
.student-page-banner {
	background: rgba(0, 0, 0, 0) url("../img/banner-student-page.jpg") no-repeat scroll center center;
}
.middle-pop.modal .modal-dialog {
	align-items: center;
	display: flex !important;
	height: 100%;
}
.center-model-cover {
	background: #fff;
	position: relative;
	width: 100%;
}
.model-student-gallery .modal-dialog {
	margin: 0 auto;
	line-height: 0;
}
.slider-student-p {
	margin: 0 0 0 -15px;
}
.detail-slider-pop {
	margin: 0 0 0 -15px;
}
.com-name span {
	border-radius: 50%;
	display: inline-block;
	float: left;
	height: 34px;
	margin: 0 8px 0 0;
	overflow: hidden;
	width: 34px;
}
.com-name span img {
	min-height: 34px;
}
.com-name {
	color: #444;
	font-size: 17px;
	line-height: 34px;
	margin: 40px 0 20px;
}
.detail-slider-pop p {
	color: #888888;
	font-size: 13px;
	line-height: 22px;
}
.close-btn svg {
	fill: #333333;
	width: 22px;
}
.close-btn {
	line-height: 0;
	position: absolute;
	right: 10px;
	top: 0;
	z-index: 20;
}
.list-img-s img {
	width: 100%;
}
.slider-student-p .owl-buttons .owl-prev, .slider-student-p .owl-buttons .owl-next {
	color: #000000;
	font-size: 0;
	left: 8px;
	position: absolute;
	top: 48%;
	z-index: 100;
}

/*************************** add nomber list 2***************************/
.padding-add-0 { padding: 0px;}
.student-gall-sec-img-st li {
	display: flex;
    float: left;
	min-height: 167px;
    position: relative;
    width: 50%;
	overflow: hidden;
}
.student-gall-sec-img-st li img {
    height: 100%;
    max-width: inherit;
    padding: 0;
    position: absolute;
}
.add-list-s-set3 li:last-child {
    min-height: 100px !important;
    overflow: hidden;
    width: 100%;
}
.add-list-s-set3 li:last-child img{ height:auto;max-width: 100%; 
}
    <div class="container">
  <div class="block-width gallery-grid-st animation-section">
  
  
  <div class="col-sm-3-add in-view">
   <a data-toggle="modal" data-target=".student-gallery-popup2">
  <div class="student-gall-list border-effect">
  <ul>
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li> 
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li> 
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li>
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li>
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li>
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"> <div class="gallery-more-no"> <h3> +2 </h3></div></li>
  </ul>
  <div class="stu-list-tags">
  <h4 class="stu-li-heading">ONGC Batch 2017</h4>
  <p> #mercurydiaries &nbsp;   #corporatebatch  &nbsp; #learnalot &nbsp;#ongcfebbatch2017 </p>
  </div>
  </div>
  </a>
  </div>
  
  
  <div class="col-sm-3-add in-view">
  <div class="student-gall-sec-img-st padding-add-0 border-effect">
  <ul>
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li> 
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li> 
  </ul>
  
  <div class="stu-list-tags">
  <h4 class="stu-li-heading">ONGC Batch 2017</h4>
  <p> #mercurydiaries &nbsp;   #corporatebatch  &nbsp; #learnalot &nbsp;#ongcfebbatch2017 </p>
  </div>
  </div>
  </div>
  
   <div class="col-sm-3-add in-view">
  <div class="student-gall-sec-img-st padding-add-0 border-effect">
  <ul>
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li> 
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li> 
  </ul>
  
  <div class="stu-list-tags">
  <h4 class="stu-li-heading">ONGC Batch 2017</h4>
  <p> #mercurydiaries &nbsp;   #corporatebatch  &nbsp; #learnalot &nbsp;#ongcfebbatch2017 </p>
  </div>
  </div>
  </div>
  
   <div class="col-sm-3-add in-view">
  <div class="student-gall-sec-img-st padding-add-0 border-effect">
  <ul>
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li> 
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li> 
  </ul>
  
  <div class="stu-list-tags">
  <h4 class="stu-li-heading">ONGC Batch 2017</h4>
  <p> #mercurydiaries &nbsp;   #corporatebatch  &nbsp; #learnalot &nbsp;#ongcfebbatch2017 </p>
  </div>
  </div>
  </div>
  
   <div class="col-sm-3-add in-view">
  <div class="student-gall-sec-img-st padding-add-0 border-effect">
  <ul>
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li> 
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li> 
  </ul>
  
  <div class="stu-list-tags">
  <h4 class="stu-li-heading">ONGC Batch 2017</h4>
  <p> #mercurydiaries &nbsp;   #corporatebatch  &nbsp; #learnalot &nbsp;#ongcfebbatch2017 </p>
  </div>
  </div>
  </div>
  
  
  
  
  <div class="col-sm-3-add in-view">
  <div class="student-gall-list border-effect">
  <figure> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt=""> </figure>
  <div class="stu-list-tags">
  <h4 class="stu-li-heading">ONGC Batch 2017</h4>
  <p> #mercurydiaries &nbsp;   #corporatebatch  &nbsp; #learnalot &nbsp;#ongcfebbatch2017 </p>
  </div>
  </div>
  </div>
  
   <div class="col-sm-3-add in-view">
  
  <div class="student-gall-list border-effect">
  <figure> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt=""> </figure>
  <div class="stu-list-tags">
  <h4 class="stu-li-heading">ONGC Batch 2017</h4>
  <p> #mercurydiaries &nbsp;   #corporatebatch  &nbsp; #learnalot &nbsp;#ongcfebbatch2017 </p>
  </div>
  </div>
  
  </div>
  
  
  
  
  
  
  </div>
  </div>

    JSfiddle

    【讨论】：

      猜你喜欢
      • 2012-09-29
      • 2012-06-02
      • 1970-01-01
      • 1970-01-01
      • 2018-12-31
      • 2018-11-29
      • 2015-04-04
      • 1970-01-01
      • 2014-07-22
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode