html - 如何在图像上方浮动两个 div?
问题描述
我在一个 div 中有两个 div 和两个图像。图像是堆叠的。它们所在的 div 是相对的,图像和两个 div 是绝对的。现在我想在右侧浮动一个 div 但它不起作用。这是我的小提琴:https ://jsfiddle.net/2vrq243v/2/
#newsline {
position: relative;
padding-top: 60px;
transition: 0.5s;
width: 100%;
height: 400px;
overflow: hidden;
}
#newsline a img {
position: absolute;
transition: 1s;
height: 360px;
width: 90%;
margin: 20px 5% 20px 5%;
}
.move {
z-index: 1;
width: 100px;
height: 100px;
display: table;
position: absolute;
border-radius: 50px;
margin-top: 150px;
cursor: pointer;
background-color: rgb(255, 255, 255, 0.25);
}
.move:hover {
background-color: rgb(255, 255, 255, 0.6);
}
.move p {
height: 100%;
text-align: center;
vertical-align: middle;
display: table-cell;
color: rgb(250, 255, 255, 0.7);
font-size: 250%;
background-color: none;
}
.move p:hover {
color: darkslategrey;
}
.next {
float: right;
}
.previous {
margin-left: 6%;
}
<div id="newsline">
<div class="move next">
<p>⮚</p>
</div>
<div class="move previous">
<p>⮘</p>
</div>
<a href=""><img src="https://www.planwallpaper.com/static/images/8ccb4ec4225b290726ae9be975220ff4.jpg" id="img1"></a>
<a href=""><img src="http://hdwpro.com/wp-content/uploads/2017/11/Awesome-Wallpaper.jpg" id="img2"></a>
</div>
解决方案
我想你想要这样的东西?您可以使用and属性调整两个div
s的位置,这是可能的,因为它们具有.left
right
position: absolute
.next {
right: 6%;
}
.previous {
left: 6%;
}
推荐阅读
- javascript - 如何通过这个访问方法?
- xhtml - 当 w3.org 停止提供某些文件时,如何在命令行上使用 Xerces 验证 XHTML?
- python - 不带逗号的字符串到字典解析
- php - 检查哪个表单字段值已更改 Symfony 3
- python - 将 2 列连接在一起
- android - DrawerLayout 必须使用 MeasureSpec.EXACTLY 进行测量。即使它有 match_parent 大小
- screenshot - Xamarin.UITest 屏幕截图位置
- sql - 执行 SQL 简单查询
- c# - 在 C#,SQL 中绘制 (X,Y) 条形图
- java - 通过标准 JDK 11 使用 graalvm