jquery - 验证错误消息弄乱了所有 `float` 布局

Question

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

布局是基本的。每个元素组都有一个容器，这些容器向左浮动。此图像是容器 33% 宽度 的“简单”图像之一，只有一个 66%，但是在许多其他页面中有许多 width组合。它还可以响应更改 media query breakpoint

处的宽度

每个容器都有一个span一个input和一个validation error spanwith display:none;

为了举例说明我的问题，我制作了这个简单的 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 因为客户特别要求尽可能避免页面中的垂直滚动而且他不在乎如果一切都非常“紧凑”，那么基本上当我收到验证错误消息时，如果容器位于页面左侧，它将弄乱所有其余容器，因为它们会改变位置以适应新的容器高度。

在这个 JSFIDDLE 你可能会更清楚我的问题是什么，因为英语不是我的第一语言。有一个注释类:

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

当您“取消注释”它时，您将重现我的问题。 (您还可以看到带有验证错误的真实表格的图像 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;
}