如何将一个元素定位到另一个元素的左侧？
ᆼᆺᆼ
使用标准 CSS 和 HTML将一个元素 ( X)定位到另一个元素 ( )左侧的惯用方法是什么inline-box 2，与其大小无关？
如果它出现在其他元素上也没关系。
ᆼᆺᆼ
我找到了一个解决方案：将一个元素定位到另一个元素的左侧，无论它们的大小如何，都将其设为子元素，然后绝对定位它right: 100%。
100%表示其父级的宽度，因此从右侧100%会将其放在它的左侧！
使用left: -100%是行不通的，因为这意味着：抵消左元素的左侧由父的宽度父，但是我们想通过子元素，本身的宽度，以抵消。
纯 CSS 演示：
/* The important parts */
#box2 {
position: relative;
}
#x {
position: absolute;
right: calc(100% + 5px);
top: -1px;
}
/* Just styling */
#box1, #box2 {
border: 1px solid blue;
width: 200px;
margin-right: 10px;
display: inline-block;
}
#x {
border: 1px solid orangered;
width: 100px;
height: 150px;
}<div id="container">
<div id="box1">box1</div>
<div id="box2">box2
<div id="x">X</div>
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何将一个元素绑定到另一个元素
- 2
如何将元素从顶部定位到固定位置，直到被另一个元素推动
- 3
如何将元素从顶部定位到固定位置，直到被另一个元素推动
- 4
如何将click事件绑定到另一个click元素中的元素
- 5
如何将元素的最后一个类复制到jQuery中的另一个元素？
- 6
如何将一个元素放置在另一个元素的北边
- 7
将列表的元素附加到迭代器的左侧或右侧到另一个列表
- 8
反应钩子。如何将args从一个元素传递到另一个
- 9
如何将一个数组的元素复制到另一个数组
- 10
如何将特定元素从数组传递到另一个视图或函数？迅速
- 11
如何将列表中的元素直接放置到另一个列表中？
- 12
如何将一个div对齐到左侧，另一个div对齐到中心？
- 13
如何通过Javascript定位另一个元素
- 14
如何将一个对象的元素推入另一个对象？
- 15
如何将一个矩阵的元素替换为另一个
- 16
如何将一个数组的元素传递给另一个？
- 17
无法将ul元素定位到另一个div的右侧
- 18
使用CSS，如何将元素锚定到基线并根据另一个“固定”元素调整其大小？
- 19
如何将向量的每个元素的幂提高到另一个向量的每个元素的幂？
- 20
如何将SVG元素的内容复制到另一个SVG元素并保持同步
- 21
将一个元素固定到另一个元素
- 22
无论项目的高度如何，如何将元素一个定位在另一个位置？
- 23
如何将一个表单元素显示在导轨中的另一个元素附近？
- 24
如何将div中的一个元素与附近的另一个元素居中？
- 25
如何将div元素放到另一个div元素的底部
- 26
如何将列表的每个元素与另一个列表的每个元素左连接
- 27
如何将元素放在另一个元素的边框上？
- 28
如何将现有的 html 元素附加到另一个元素？
- 29
HTML如何将iframe中的链接定位到另一个iframe
我来说两句