视口宽度元素正在破碎

Question

我的网站上有一些视口宽度元素存在问题。连续有八个div，宽度为10vw，边距为2.2222vw。视口宽度一起大约低于100（99.9998）。 div是浮动的，所以它们应该保持连续。

一切都很好但是当我添加标题时，元素就会破碎。在下面的小提琴中，div没有视口而破坏。查看我的网站演示，了解“真实”问题。

这是我的元素CSS（SCSS）：

door {
    width: 10vw;
    height: 10vw;
    border: solid 3px #000;
    float: left;
    margin-left: 2.222vw;
    position: relative;
    margin-bottom: 2.222vw;
    a {
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        position: absolute;
    }
}

.door.last {
    margin-right: 2.222vw;
    float: right;
}

FIDDLE | WEBSITE DEMO

Answer 1

我认为这可能是您的解决方案，请尝试此操作

slideUp()

我添加了两个类来以水平和垂直方式排列div。所以这将是那些水平和veritcal div的css。

slideDown()

此外，不需要类'last'，而float：right是导致你麻烦的主要因素。