Question

我有一些有条件地出现的文字。当文本显示时，它会向下推动页面的其余部分。

即使没有显示文本空间，保留文本空间的正确方法是什么，以避免下推？

我想避免使用绝对位置并为容器提供预先固定的高度。

附加了代码段。只需单击按钮，即可看到绿色框被推动。

＆＃13;

new Vue({
  el: "#app",
  data: {
    message: "hello",
    push:false
  }
});

＆＃13;

button{
  display:block;
}
#push-down{
  height:100px;
  width:100px;
  background-color:green;
}

p{
  font-size:30px;
  margin:0;
}

＆＃13;

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <button @click="push=!push">click me to push</button>
  <p v-show="push">{{message}}</p>
  <div id="push-down"></div>
</div>

＆＃13;

Answer 1

您可以通过在元素上设置CSS属性visibility来实现您想要的效果。

将此属性设置为hidden将隐藏视图中的元素，同时保持可见时将使用的空间。您可以将visibility设置为visible Check out the MDN docs here。

，使其可见

Answer 2

如果您知道元素的高度，您可以将其包装在具有定义高度的div上。

为动态显示文字预留空间

2 个答案: