0

我在 Visual Composer 中有一系列全屏 div，我希望在每个 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。

您知道如何正确定位该图标吗？

4

2 回答 2

1

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

只需在全高行下方放置另一行。把你的图标放在那里，给这个元素一个上边距，即-200px。

出于某种奇怪的原因，将图标放在全高行本身并将其绝对定位到底部的相当合乎逻辑的方法不受 WPB 生成的源的正确支持。

于 2020-11-07T10:03:45.900 回答
0

I had this issue this week. The way I resolved it was added the icon in that row/section (in my case a single image element with a custom link to a .svg) and added a class to it.

The CSS for the class was then:

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

(I added a negative margin top as I noticed the icon was cutting of a little on my Google Pixel phone with the fixed bottom bar so that pulled it up a little.)

于 2021-01-19T07:58:06.233 回答