Question

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

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

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

此处the example。 H2从流动中移除，看起来很漂亮，而不是坍塌，而H3坐在那里与它的前任无论如何都会崩溃。现在，边缘折叠使得H2和H3的垂直对齐以连贯的方式，与前面的元素无关，是不可能的。

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

这可以解决吗？

修改：事实上，此处的目标是让h2和他们的第一个h3达到相同的高度。

Answer 1

一种解决方案

在您的特定情况下，您似乎不一定需要将h2取消，而是将其设置为position: relative，因为您需要it should achieve the effect。

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

另一种解决方案

如果您将h3后的h2设置为display: inline-block，请使用...

h2+h3 {display: inline-block;}

...然后it resolves your collapsing issue，假设您没有inline elements immediately following h3标记。您似乎计划在块级p标记中包含任何后续文本，因此这不应该是一个问题。

Answer 2

这是我提出的修复方法：

.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一样。它是内容“属性”上的长字符串，但它几乎是我能想到的唯一方法。

看看演示 - ＆gt; http://tinkerbin.com/H3G7HjWg

Answer 3

你是否试图避免两个边缘崩溃？你能为h3标签添加1px白色边框（并将其边距调整为1px以进行补偿）吗？我认为这应该可以防止边缘崩溃。

Answer 4

我重写了你的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关闭的。这导致了一个问题。

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

在流动的兄弟姐妹之间Un marg marg marg marg marg marg marg marg marg

4 个答案:

一种解决方案

另一种解决方案