我有一个article
,只有少量内容与figure
标记中带有标题的图像配对。 article
具有2个用CSS3列声明的列。但是,正在从figcaption
内部拉出figure
,以使列均匀。
的CSS
article {
-webkit-columns: 325px 2;
-moz-columns: 325px 2;
columns: 325px 2;
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
}
figure img {
width: 100%;
margin: 0;
}
figure {
border: 0.5px solid #d7d7d7;
margin-bottom: 30px;
margin-left: 4px;
}
figcaption {
padding: 11px 20px;
font-family: 'Montserrat';
font-size: 12px;
/* IE 8 */
ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
/* IE 5-7 */
filter: alpha(opacity=80);
/* Netscape */
moz-opacity: 0.8;
/* Safari 1.x */
khtml-opacity: 0.8;
/* Good browsers */
opacity: 0.8;
border-top: 0.5px solid #d7d7d7;
-webkit-box-shadow: 0 1px 5px 2px #d7d7d7;
-moz-box-shadow: 0 1px 5px 2px #d7d7d7;
box-shadow: 0 1px 5px 2px #d7d7d7;
}
的HTML
<article>
<figure>
<img width="574" height="350" src="myimage.jpg">
<figcaption>CAPTION: ipsum dolor sit amet, consectetur adipiscing elitus Vivamus sed porttitor nisl, vel condimentum.</figcaption>
</figure>
<p>Lorem ipsum dolor sit amet, proin consectetur adipiscing elit vesti bulum feugiat dapibus erat, vel vulputate purus placera.</p>
</article>
研究使我进入
break-inside
,指定break-inside
规则解决了从figcaption
中提取figure
的问题,但是box-shadow
留在另一列中,甚至更糟。article figure {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
我已经在Chrome和Safari中确认了此问题,而Firefox完全忽略了
break-inside
规则并给出了第一个屏幕截图的结果,即使figcaption
规则中也包含了break-avoid
。article
可以具有任意数量的段落,并且当有足够的文本以匹配图像的高度时,它将正确显示我如何才能将整个
figcaption
元素留在跨浏览器的一列中,包括box-shadow
?还是CSS3列太新而无法修复? 最佳答案
通过将inline-block
显示属性添加到figure
来解决
figure {
border: 0.5px solid #d7d7d7;
margin-bottom: 30px;
margin-left: 4px;
display: inline-block;
}
这就解决了阴影落入Chrome和Safari的下一栏中的问题,而IE和Firefox忽略了
break-inside
规则,除非进行了声明。关于html - CSS列中断<figcaption>,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37449271/