Question

我有两个带文本的paragrpahs标签，两者都有宽度约束。我有宽度约束，因为我希望它们在调整浏览器宽度时堆叠。

  <p class="text"> Line 1. Big text. </p>
  <p class="small-text">Line 2. Small text. </p>

我现在面临的问题是第一行堆叠它与第二行重叠，反之亦然。我特意将它分成了一个div，但它并没有帮助。这两行都有不同的字体样式。所以，我不能把它们放在同一个标签上。

非常感谢任何帮助。

Answer 1

您可以更好地了解absolute和relative定位。

非常简单，absolute将元素从HTML流中取出，并将其粘贴在当前div的左上角。（这有点过于简单了。请参阅第一篇参考文章以获得出色的解释 - 但现在这基本上是正确的。）

relative从流中正常位置的元素开始，但允许您在元素开始的位置左/右上/下重新定位元素。

float:left和float:right将该元素从正常流中取出，但将其留在左边距。

进一步阅读：

Answer 2

只需遵循以下五个步骤：

删除绝对定位

取出position: absolute 绝对定位将元素从元素流中取出，并将元素相对于窗口定位，而不是相对于其他元素定位。这会导致您的元素停留在一个地方并混合在一起。

删除z-index

取出z-index: 100 z-index是一种分层系统，其中较高的数字是较低数字之上的层。如果您需要将这些p元素放在其他元素的顶部，请将它们放在容器div中，并将容器设置为顶层图层。

添加display: inline-block 内联块将允许您的元素彼此相邻显示（内联）。元素的内部被格式化为块级别框，但元素本身被视为内联级别元素。这样你的p元素就会快乐地坐在一起。

具有百分比宽度会导致元素根据浏览器大小调整宽度，而不是堆叠。要使元素堆叠，但也有适合浏览器大小的宽度，请使用ems而不是百分比。 Ems会根据文本大小而不是浏览器大小调整元素大小，并适应用户正在阅读的文本大小（较小的屏幕将呈现较小的文本，因此，您的元素也会变小）。

您需要记住保持代码干净（不要重复自己）。你的p元素都有一些类似的属性，可以放在一个CSS块中，而不是重复每个。您可以使用原生'p'元素：p { styles common to all p elements }

Answer 3

它是position:absolute和您的边距百分比的组合。