如何获得CSS栏以边距正确播放? [英] How do I get css columns to play properly with margins?
问题描述
在野生动物园中，第二栏显得更高.两列均以h4开头，但看来div本身的顶部填充仅适用于第一个.不太确定发生了什么.它在Chrome中排成一行
In safari, the second column appears higher. Both columns begin with an h4, but it appears that the top padding on the div itself is only applying to the first one.. or something. Not really sure what's going on. It lines up in Chrome
推荐答案
据我了解，当前[19/09/2012] CSS3列的实现有时会从一列的底部开始添加边距/填充，并进行一些填充/填充继续下一个.我不知道该如何确定，但是我在工作的布局上遇到了麻烦，因为在更改内容量时，有时我的列的顶部会对齐，有时却无法对齐.有点偶然.
It's my understanding that the current [19/09/2012] implementation of CSS3 columns sometimes takes margin/padding from the bottom of one column and carries some of it on to the next. I don't know exactly how this is determined, but I was having trouble with a layout I was working where, as I changed the amount of content, sometimes the tops of my columns would line up, and sometimes they wouldn't. It was kind of haphazard.
我想出的解决方案是:
对于这些部分(在您的情况下为特色"，导演"，表演"，等)，请遵循以下规则:
For the sections (in your case that'd be "featuring", "directed by", "performances", etc) apply these rules:
-moz-column-break-inside:avoid;
-webkit-column-break-inside:avoid;
column-break-inside:avoid;
然后，不要使用边距来分隔各个部分，而应使用填充.填充被认为是本节的一部分，我们要告诉填充不要在内部破坏，而保证金则不能.
Then, instead of using margin to separate the sections, use padding. Padding is considered part of the section we are telling it not to break inside, whereas margin is not.
这篇关于如何获得CSS栏以边距正确播放?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
