Html 为什么我的文本溢出到引导行并向下推？

这是我在这里的第一篇文章，但我觉得有必要问这个问题，因为我一直在试图找出正确的解决方案，但没有取得任何成功

我花了更多的时间，然后我想承认，我试图弄清楚行和列的位置，以及如何操作其中的元素，但我很难完成我的布局。我想把我的两个按钮都放在现在的位置，但不想让它们在引号框充满文本时向下移动

我知道发生了什么，但我不知道如何正确地修复它。。我相信当文本流入buttons div时，quote文本的边距向下推动按钮行。如何使按钮div/行忽略任何文本，并在出现异常长的quote时保持不变。显然，我最终会修正引号的长度，但现在我想知道如何使我的按钮保持原位，以及如何在不依赖文本左/右/中的情况下正确地向左或向右移动它们。必须有一种更精确地控制行中元素位置的方法，不是吗

这是我的代码笔和代码：

---

谢谢你的帮助

您必须使用Position属性将它们固定到框的底部

这里我使用的是位置：绝对属性。有关该职位的更多信息，请参见：

检查下面的小提琴：

我添加了以下代码

#quote-box{
  padding-bottom: 60px; /* so that the icons dont overlapp the text*/
}

#button-rows{
  position: absolute;
  bottom: 10px;
  width: 100%;
}

---

我绝对会把这些图标放在底部。您可以通过定位行并保持图标对齐不变来实现这一点。然后，您可以在新引号中添加一些填充，以便引号框的内容不会与这些图标重叠，具体取决于您希望引号的外观、引号的长度等

在HTML中包含CSS，以便在引导后加载。这里有一个更新的代码笔

@进口urlhttps://fonts.googleapis.com/css?family=Raleway:400,500; 身体{ 背景色：9E0E； 字体系列：雷威； 字体大小：400； } .集装箱{ 宽度：600px！重要； 利润上限：200px； } 头衔{ 颜色：fff； .标题文本{ 字体大小：40px； 文本对齐：居中； } } 报价箱{ 高度：300px； 背景色：ffffff； 边缘顶部：20px； 左边距：自动； 右边距：自动； 边界半径：3px； } 按钮行{ 位置：绝对位置； 底部：0.5em； 左：1米；右：1米； } 新报价{ 填充：1em； } F.评论{ 颜色：ba0e0e； 文本阴影：2PX2PX1PXCCC； } .fa注释：悬停{ 颜色：910a0a； } .fa推特{ 颜色：ba0e0e； 文本阴影：2PX2PX1PXCCC； } .fa推特：悬停{ 颜色：910a0a； } 随机报价机 asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf

#quote-box{
  padding-bottom: 60px; /* so that the icons dont overlapp the text*/
}

#button-rows{
  position: absolute;
  bottom: 10px;
  width: 100%;
}