Question

在大屏幕中，图像项未采用父级的全部宽度，仅在Chrome中存在问题，在Firefox和苹果浏览器中尝试过，它们很好！尝试了一些关于SO中类似问题的答案，但是没有运气！

这是codepen

.THIS .masonry {
	height: auto !important;
}

.THIS .masonry::after {
		content: " ";
		display: block;
		height: 0;
		clear: both;
}
	
.THIS #columns {
	column-width: 250px;
	column-gap: 15px;
  	width: 100%;
    margin-bottom:19px;
}

.THIS div#columns figure {
	background: #fefefe;
	border: 2px solid #eee;
	/*box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);*/
	margin: 0 2px 15px;
	padding: 10px;
	padding-bottom: 10px;
	transition: opacity .4s ease-in-out;
    display: inline-block;
    column-break-inside: avoid;
}

.THIS div#columns figure img {
	width: 100%; height: auto;
	border-bottom: 1px solid #ccc;
	padding-bottom: 15px;
	margin-bottom: 5px;
}

.THIS div#columns figure figcaption {
    font-size: .8rem;
    color: #444;
    line-height: 1.5;
}

.THIS div#columns small { 
  font-size: 1rem;
  float: right; 
  text-transform: uppercase;
  color: #aaa;
} 

.THIS div#columns small a { 
  color: #666; 
  text-decoration: none; 
  transition: .4s color;
}

.detail-figcaption + figcaption {
	display: none;
}

<span class="THIS a">
<div class="masonry" id="columns" data-aura-rendered-by="81:0">
    <figure class="item" data-aura-rendered-by="1:377;a">
    <img class="attachment-home-thumbnail size-home-thumbnail wp-post-image" alt="" src="https://res.cloudinary.com/tempuser3/image/upload/s--UxAphIx0--/v1535010155/9413cd2cf45f7830a39fdd24025d6d21.png" width="262" data-aura-rendered-by="2:377;a">
    <figcaption class="detail-figcaption" data-aura-rendered-by="3:377;a">, Painting, 438 X 318<br data-aura-rendered-by="10:377;a"></figcaption>
</figure>
<figure class="item" data-aura-rendered-by="31:377;a">
    <img class="attachment-home-thumbnail size-home-thumbnail wp-post-image" alt="" src="https://res.cloudinary.com/tempuser3/image/upload/w_262,q_auto:low/v1531486409/IUII3rYZ9o.jpg" width="262" data-aura-rendered-by="32:377;a">
    <figcaption class="detail-figcaption" data-aura-rendered-by="33:377;a">Paint TheArtist, Print/Drawing, 866 X 1200, Tel, Aviv, Israel<br data-aura-rendered-by="40:377;a"></figcaption>
</figure>
<figure class="item" data-aura-rendered-by="80:377;a">
    <img class="attachment-home-thumbnail size-home-thumbnail wp-post-image" alt="" src="https://res.cloudinary.com/tempuser3/image/upload/w_262,q_auto:low/v1533722730/water_splash_background-t2.jpg" width="262" data-aura-rendered-by="81:377;a">
    <figcaption class="detail-figcaption" data-aura-rendered-by="82:377;a">, 510 X 330<br data-aura-rendered-by="89:377;a"></figcaption>
</figure>
<figure class="item" data-aura-rendered-by="129:377;a">
    <img class="attachment-home-thumbnail size-home-thumbnail wp-post-image" alt="" src="https://res.cloudinary.com/tempuser3/image/upload/w_262,q_auto:low/v1533713297/photo-1526599235054-9bd6a36c7885.jpg" width="262" data-aura-rendered-by="130:377;a">
    <figcaption class="detail-figcaption" data-aura-rendered-by="131:377;a">, 1000 X 667<br data-aura-rendered-by="138:377;a"></figcaption>
</figure>
<figure class="item" data-aura-rendered-by="159:377;a">
    <img class="attachment-home-thumbnail size-home-thumbnail wp-post-image" alt="" src="https://res.cloudinary.com/tempuser3/image/upload/w_262,q_auto:low/v1532070883/r9enqpbefz4mgrsccra5.jpg" width="262" data-aura-rendered-by="160:377;a">
    <figcaption class="detail-figcaption" data-aura-rendered-by="161:377;a">, 594 X 917<br data-aura-rendered-by="168:377;a"></figcaption>
</figure>
<figure class="item" data-aura-rendered-by="189:377;a">
    <img class="attachment-home-thumbnail size-home-thumbnail wp-post-image" alt="" src="https://res.cloudinary.com/tempuser3/image/upload/w_262,q_auto:low/v1532069623/nlll6ot75vuz9o0c1pfb.jpg" width="262" data-aura-rendered-by="190:377;a">
    <figcaption class="detail-figcaption" data-aura-rendered-by="191:377;a">, 72 X 100<br data-aura-rendered-by="198:377;a"></figcaption>
    <!--render facet: 218:377;a-->
</figure>
<figure class="item" data-aura-rendered-by="219:377;a">
    <img class="attachment-home-thumbnail size-home-thumbnail wp-post-image" alt="" src="https://res.cloudinary.com/tempuser3/image/upload/w_262,q_auto:low/v1532010350/o9aeanqvhnprwmswmtfp.jpg" width="262" data-aura-rendered-by="220:377;a">
    <figcaption class="detail-figcaption" data-aura-rendered-by="221:377;a">, 866 X 1200<br data-aura-rendered-by="228:377;a"></figcaption>
</figure>
<figure class="item" data-aura-rendered-by="249:377;a">
    <img class="attachment-home-thumbnail size-home-thumbnail wp-post-image" alt="" src="https://res.cloudinary.com/tempuser3/image/upload/w_262,q_auto:low/v1532007196/y4ff0tjjeero2dpx0dwn.jpg" width="262" data-aura-rendered-by="250:377;a">
    <figcaption class="detail-figcaption" data-aura-rendered-by="251:377;a">, 866 X 1200<br data-aura-rendered-by="258:377;a"></figcaption>
</figure>
<figure class="item" data-aura-rendered-by="279:377;a">
    <img class="attachment-home-thumbnail size-home-thumbnail wp-post-image" alt="" src="https://res.cloudinary.com/tempuser3/image/upload/w_262,q_auto:low/v1532007107/i2vyk6dnafswojormblp.jpg" width="262" data-aura-rendered-by="280:377;a">
    <figcaption class="detail-figcaption" data-aura-rendered-by="281:377;a">, 866 X 1200<br data-aura-rendered-by="288:377;a"></figcaption>
</figure>
</div>
</span>

设计基于此代码 https://codepen.io/dudleystorey/pen/yqrhw

有什么解决方法吗？

chrome中的Flex框项目未采用父级的全部宽度

0 个答案: