验证错误消息搞乱所有`float`layout

Question

我在一个有很多表单页面的网页上工作。在此屏幕截图中，您可以看到其中一个页面：

布局是基本的。每个元素组都有一个容器，这些容器向左浮动。这个图像是＆＃34;简单＆＃34;之一。容器33% width和66%只有一个容器，但在许多其他页面中有许多width组合。它还会响应media query breakpoint

更改宽度

每个容器都有span和input以及validation error span，其显示：无;

为了复制我的问题，我做了一个简单的html：

<div class="container padding">
    <span>name:</span>
    <input type="text"/>
    <span class="error">validation error</span>
</div>
<div class="container">
    <span>name:</span>
    <input type="text"/>
    <span class="error">validation error</span>
</div>
<div class="container padding">
    <span>name:</span>
    <input type="text"/>
    <span class="error visible">validation error</span>
</div>
<div class="container ">
    <span>name:</span>
    <input type="text"/>
    <span class="error ">validation error</span>
</div>
<div class="container padding">
    <span>name:</span>
    <input type="text"/>
    <span class="error">validation error</span>
</div>
<div class="container ">
    <span>name:</span>
    <input type="text"/>
    <span class="error">validation error</span>
</div>

问题在于我无法再向这个容器提供margin-bottom，因为客户端已经特别要求避免在页面中进行可能的垂直滚动，并且他不关心一切都很紧凑＆＃34;所以基本上当我收到验证错误消息时，如果容器位于页面的左侧，它会弄乱所有其余的容器，因为它们会改变位置以适应新的容器高度。

在此 JSFIDDLE 您可能会更好地了解我的问题，因为英语不是我的第一个lenguaje。这是一个评论类：

/*.visible {display:inline;}*/

当你＆＃34;取消注释＆＃34;你会复制我的问题。 （您还可以看到包含验证错误 here 的真实表单的图片）

我无法在此范围内使用position:absolute，因此没有足够的空间来显示消息。我多年来一直试图做的是，如果我在左侧容器上有验证错误，下面的所有容器都会移动，就好像它位于正确的容器上一样（例如 fiddle ）

我认为只能使用css进行此操作，因此任何jquery解决方案都会得到满意的解释。提前致谢

Answer 1

抱歉 - 我知道这很难看，但也许你可以使用像this这样的东西。您必须始终在错误范围内保留文本，或者您可以在其上设置明确的高度（可能是最小高度）。

.container.visible-error+.container:not(.padding) .error {
    display: inline;
    visibility: hidden;
}
.container+.container.visible-error:not(.padding) .error {
    visibility: visible;
}
.container.visible-error .error {
    display:inline;
}