gpt4 book ai didi

jquery - 图像下方的位置按钮

转载 作者:太空宇宙 更新时间:2023-11-04 08:52:50 24 4
gpt4 key购买 nike

我正在尝试将这些放置在图片的正下方。我可以让它们出现在下方,但不会出现在图像之后。同样在移动版本上,它不是一行。按钮不在一行下面有一个按钮作为一列比较好。提供的屏幕截图。请帮忙

Too much whitespace between image and next section

Mobile version

这是我的网站:http://www.kiljakandweb.com

这是我的HTML:

     <section class="projects" id="myprojects">
<div class="row">

<div class="col-md-12 col-lg-12 col-xs-12 col-sm-12">
<img src="images/iPad2.png" alt="">
</div>

</div>

</section>
<section>
<div class="row">
<div class="col-lg-1 col-xs-2 col-sm-2 col-md-1 col-centered">
<a href="#" ><i class="fa fa-plus-circle fa-3x buttons1" aria-hidden="true"></i></a>
<a href="#" ><i class="fa fa-chevron-circle-down fa-3x buttons1" aria-hidden="true"></i></a>
</div>
</div>
</section>

这是我的CSS:

img {
float: right;
width: 85%;
margin-top: 250px;
margin-right: -25px;
padding-bottom:200px;
}

.col-centered{
float: none;
margin: 0 auto;
padding-bottom: 200px;
}

jQuery:

$(document).ready(function(){
$("img").fadeOut("fast");
$(".buttons1").fadeOut("fast");

$("a").on("click", function(){
$("img").fadeIn(2000);
})

$("a").on("click", function(){
$(".buttons1").fadeIn(2000);
})

});

最佳答案

首先有一个填充,防止按钮出现在图像下方。您可以通过将其添加到您的 css 文件中轻松解决此问题。

section#myprojects img {
padding-bottom: 0px;
}

对于第二个问题,我建议你像这样给这个 div 一个 id:

<div class="col-lg-1 col-xs-2 col-sm-2 col-md-1 col-centered" id="yourIDhere">

然后你可以在你的css文件中调用它:

#yourIDhere a {
display: table-cell;
padding: 5px;
}

或者试试这个(如果你在别处使用这个类定义我不会推荐)

.col-lg-1.col-xs-2.col-sm-2.col-md-1.col-centered a {
display: table-cell;
padding: 5px;
}

关于jquery - 图像下方的位置按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43312315/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com