当使用HTML/CSS发生误差时，将块移动更高

Question

所以，这张照片显示了我想要的东西，在下面我更详细地描述它：

链接到图片（我不允许在这里粘贴它们）

所以，我正在解释发生了什么。您有三个主要元素

1）最高文本" bla bla bla bla"

2）按钮"单击我"

3）和最低文本

单击按钮时，将发生错误，并且会出现，如您所见。我想将两个首先元素移至更高，并且我不希望触摸最低的文本。因此，它应该保持与书面相同的位置。

我的问题是 - 如何使用html/css代码（我不询问JS代码以显示文本外观）。我需要html/css来响应更高的两个第一元素。

Answer 1

我认为使用JavaScript可以更好地处理这一点，因为您可以计算基于此基于此的错误消息的高度。如下所示。

//Purely to demonstrate CSS
$("#btn").click(function(){
  $(".msg").toggleClass("error");
});

.msg {padding: 3em; border:1px solid black;}
.msg.error {padding-top: 1em; /*Remove the height of the error mesage*/
border-color:red;}
.errorMsg { 
display:none;
color:red;
height:2em;}
.error .errorMsg{
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="msg">
<h1>bla blah bla</h1>
   <input type="button" value="Click Me" id="btn" />
   <div id="error" class="errorMsg">Error message goes here</div>
   <div>Text has to not move</div>
</div>

替代选项是使用可见性属性来维护页面上隐藏元素的位置

.msg {padding: 30px; border:1px solid black;}
.errorMsg { visibility:hidden; /*Important line*/
color:red;}
.errorMsg:target{
  visibility: visible;
}

<div class="msg">
<h1>bla blah bla</h1>
   <a href="#error">Click Me</a>
   <div id="error" class="errorMsg">Error message goes here</div>
   <div>Text has to not move</div>
</div>

我已经在上述演示中使用了目标来进行样式，您可以通过将类添加到错误元素或属于父母的样式来根据要求进行更改。