Question

我在Visual Composer中有一系列全屏div，我希望每个箭头的底部都有一个箭头，指示用户应该滚动以获取更多内容。我尝试在没有图标的div上绝对定位。我要做的就是将图标移到几个像素

<section class="l-section wpb_row height_full valign_center width_full with_img" id="home">
<div class="l-section-img loaded" data-img-width="1920" data-img-height="809">
</div>

<div class="l-section-h i-cf">
<div class="g-cols vc_row type_default valign_top">
<div class="vc_col-sm-12 wpb_column vc_column_container">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="w-image align_center" id="mainlogo">
<div class="w-image-h"><img src="logo.png" class="attachment-full size-full">
</div>
</div>


<div class="ult-just-icon-wrapper">
<div class="align-icon" style="text-align:center;">

<a class="aio-tooltip" href="#whatis">
<div class="aio-icon none " style="display:inline-block;">

<i class="Defaults-chevron-down"></i>

</div>
</a>

</div></div></div></div></div></div></div>
</section>

现有CSS：

.aio-icon.none {
    display: inline-block;
}
.aio-tooltip {
    display: inline-block;
    width: auto;
    max-width: 100%;
}
.vc_column-inner {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 0;
}
.wpb_column {
    position: relative;
}
.vc_column_container {
    display: flex;
    flex-direction: column;
}
.vc_row {
    position: relative;
}
.l-section-h {
    position: relative;
    margin: 0 auto;
    width: 100%;
}

图标本身是 Defaults-chevron-down 。

您知道如何正确放置该图标吗？

Answer 1

我对此也有些挣扎。但是有一个相当快速而肮脏的解决方法：

只需在全高行下方放置另一行。将图标放在此处，并为该元素设置-200px的上边距。

由于某些奇怪的原因，WPB生成的源未正确支持将图标放在全高行本身并将其绝对定位在底部的逻辑方法。

Answer 2

这周我遇到了这个问题。我解决它的方式是在该行/部分中添加图标（在我的例子中是一个带有自定义链接到 .svg 的单个图像元素）并为其添加了一个类。

该类的 CSS 是：

position:absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
margin-top:-30px;

（我添加了一个负边距顶部，因为我注意到我的谷歌 Pixel 手机上的图标在我的谷歌像素手机上被剪掉了一点，底部栏是固定的，所以把它拉了一点。）

将向下滚动箭头对齐到WPBakery Visual Composer中全屏div的底部中心

2 个答案: