3

这就是让我在晚上哭泣的原因。有人会希望 CSS 有一个指令margin-collapse:none;，但可惜，这是我的想象。

你如何让两个流入的兄弟姐妹不崩溃？

我之前在元素和生成元素上都尝试过overflow:hidden, clear:both，但没有任何效果。border:1px solid white

这是示例。H2 已从流程中移除，以便在侧面看起来很漂亮，而不是崩溃，而 H3 则坐在那里，无论如何都与其前身一起崩溃。现在边距折叠使得 H2 和 H3 以连贯的方式垂直对齐，独立于前面的元素，不可能。

约束：不能添加 HTML 标记，因为内容是通过 Markdown 生成的。

这可以解决吗？

编辑：事实上，这里的目标是让h2 和他们的第一个h3出现在相同的高度。

4

4 回答 4

4

一种解决方案

在您的特定情况下，您似乎不一定需要h2退出流程，而是将其设置为position: relative，因为它应该达到您想要的效果。

但是，这并不能真正解决您的保证金崩溃问题。

另一种解决方案

如果您将h3a 后面的设置h2为display: inline-block，则使用...

h2+h3 {display: inline-block;}

...然后它解决了您的折叠问题，假设您没有inline 紧跟h3标签的元素。您似乎计划在块级p标签中包含任何以下文本，因此这不应该成为问题。

于 2012-07-21T17:55:14.063 回答
4

这是我想出的解决方法：

.ncFix {
  display: inline-block;
}

/*ensures width isn't cropped. 
  acts as width: auto - like a
  regular block-level element*/
.ncFix:before {
  content:". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
  display: block;
  height: 0;
  overflow: hidden;
}

该伪元素使元素的width: auto行为就像width: auto带有 的元素一样display: block。这是内容“属性”的一个长字符串，但这几乎是我能想到的让它工作的唯一方法。

看看演示 -> http://tinkerbin.com/H3G7HjWg

于 2012-07-22T05:44:07.713 回答
2

您是否试图避免两个边距折叠在一起？您能否在 h3 标签中添加 1px 白色边框（并将其边距调整 1px 以进行补偿）？我认为这应该可以防止利润崩溃。

于 2012-07-18T07:04:53.627 回答
2

我重写了你的 css - 对我来说它看起来有点不对劲

*{
 border: 1px solid red;   
}
html {}
body{ border:0 solid gray; border-top:none; border-bottom:none;
   width:8.5in; margin:auto;
   font-family:Helvetica, sans-serif; padding:1em; padding-left:3.5in; }

h1{ font-size:36pt;}
h2, h3{
 display: block;   
}
h2{margin-left: -200px; display: block; float: left}
h3{margin-top: 40px;}

同样在 HTML 中，您的 UL 标记之一没有正确关闭（它是用 ul 而不是 /ul 关闭的。这导致了一个问题。

我还建议在您的尺寸中使用像素而不是英寸 - 英寸和厘米有时会在布局方面产生不可靠的结果。

于 2012-07-24T12:40:36.530 回答