如何让 css 列与边距正确配合？
在 safari 中，第二列显示得更高。两列都以 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
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
据我了解，当前 [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.
The solution I came up with was this:
For the sections (in your case that'd be "featuring", "directed by", "performances", etc) apply these rules:
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.
您可以轻松地看到您有填充
并且您的
.info正在运行它< img src="https://i.sstatic.net/PVg98.png" alt="在此处输入图像描述">
删除
.info顶部填充，你会没事的。这一切都会发生，因为您的
h4已经具有相同的填充。you can easily see you have padding
and your
.infois running itremove the
.infotop padding and you will be fine.this is all happen because your
h4already have the same padding.