在chrome我的列不能正常工作

时间：2017-03-28 05:39:38

标签： html css

我在Firefox中使用columns正常img in firefox working fine

并且在Chrome中无法正常工作not working perfect

https://jsfiddle.net/ab3taj6m/

2 个答案:

答案 0 :(得分：1)

从display: inline

中删除.col-sm-3 

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

答案 1 :(得分：0)

将display:flex添加到.block-width.gallery-grid-st。 Works 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

相关问题
最新问题