主页 / 问题 / 1410410
Accepted
Antoxer
Asked:2022-07-16 18:45:55 +0000 UTC2022-07-16 18:45:55 +0000 UTC

添加文本将块向下移动

  • 772

有一个这样的块：

<div id="cont">
  <div id="error-text"><span></span></div>
  <div id="cont-head">...</div>
  <div id="cont-body">...</div>
</div>

cont应用于积木position: fixed，这就像一张卡片，里面有各种按钮。当我点击这些按钮时，我需要span在文本中添加错误（通过.text()JQuery 平庸），它应该显示在卡片上方。但最重要的是，当您添加文本时，卡片（或更确切地说是其内容）会根据文本的大小向下移动。我需要确保无论文本大小如何，卡片都不会移动，并且文本正好出现在它的上方。

这是问题的可视化，以防万一：

document.getElementById('btn').onclick = function() {
  document.getElementById('error-text').firstChild.innerText = 'some error text here';
}
#cont {
  position: fixed;
  top: 60%;
  left: 40%;
  width: 250px;
}

#cont-head {
  background: gray;
}

#cont-body {
  background: whitesmoke;
}

#error-text {
  color: red;
}
<div id="cont">
  <div id="error-text"><span></span></div>
  <div id="cont-head">some header</div>
  <div id="cont-body">
    some content
    <button id="btn">click</button>
  </div>
</div>

html css

2 个回答

  1. 我不太明白你想要什么。

    position: fixed 应用于包装器 cont，文本和所有其他元素都在里面。而且移动的不是你的块，而是块的内容随着错误文本的高度而增加。

    我看到的唯一方法是：

    您可以为错误文本预先设置一个位置，从上方缩进，为具有一定高度的文本设置一个包装器，该高度等于从上方缩进。将溢出：隐藏在错误文本的包装上并高兴。

    得到这样的东西：

    #error-text {
  height: 20px;
  max-height: 20px;
  width: 100%;
  overflow: hidden;
  
}

    但是如果错误文本太大，那么它不会适合所有

    • 0
  2. Best Answer

    #error-text分配 position:absolute; bottom:40px;

    document.getElementById('btn').onclick = function() {
  document.getElementById('error-text').firstChild.innerText = 'some error text here';
}
    #cont {
  position: fixed;
  top: 60%;
  left: 40%;
  width: 250px;
}

#cont-head {
  background: gray;
}

#cont-body {
  background: whitesmoke;
}

#error-text {
  color: red;
  position:absolute;
  bottom:40px;
}
    <div id="cont">
  <div id="error-text"><span></span></div>
  <div id="cont-head">some header</div>
  <div id="cont-body">
    some content
    <button id="btn">click</button>
  </div></div>

    • 0

相关问题