我有下表:
点击带圆圈的蓝色图标,应该会打开一个“ float ”div,右侧有一些元素。
这个 div 应该是响应式的并且与行完美对齐。
我通过将 float div 定义为 absolute
并使用固定像素尺寸来做到这一点。
我的问题是,如果我根据行的相对位置对齐 float div,它会被父 div 覆盖
。如果我将它设为相对于 dom 的绝对值,那么它就不会响应。
关于我的 div 结构应该是什么样子有什么建议吗?
如果缺少任何信息,请告诉我?
编辑:
这是一个显示问题的 JS-fiddle:https://jsfiddle.net/omriman12/3gv788o4/
我希望红色方 block 与行对齐(尝试将红色方 block 移动到黑框的右侧)
最佳答案
试试这个,也许你正在要求这个。
.main_wrapper{
width: 79%;
position:relative;
display: inline-block;
overflow: hidden;
}
.a1{
width: 100%;
height: 50px;
background-color: black;
}
.a2{
width: 100%;
height: 50px;
background-color: red;
position: fixed;
right: 0px;
top: 8px;
}
.blue-wrapper {
width:20%;
background-color:blue;
display: inline-block;
height:50px;
}
(或)
.main_wrapper{
width: 100%;
position:relative;
display: inline-block;
overflow: hidden;
}
.a1{
width: 100%;
height: 50px;
background-color: black;
}
.a2{
width: 100%;
height: 50px;
background-color: red;
position: absolute;
left: 0px;
top: 8px;
z-index:9;
}
.blue-wrapper {
width:20%;
background-color:blue;
display: inline-block;
height:50px;
position:absolute;
top:8px;
right:8px;
z-index:1;
}
关于javascript - 通过单击将 float div 添加到表格行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38186661/