可以使用 CSS 的绝对定位来实现这个效果。具体步骤如下:

  1. 给父元素设置相对定位,这样子元素的绝对定位将以父元素为参照物。
  2. 给子元素设置绝对定位,并设置 'right' 属性为 0,这样子元素就会紧贴着父元素的右边。
  3. 如果需要子元素与父元素底部对齐,可以设置 'bottom' 属性为 0。

CSS 代码示例:

.parent {
  position: relative; /* 父元素相对定位 */
  width: 200px;
  height: 200px;
  background-color: #f2f2f2;
}

.child {
  position: absolute; /* 子元素绝对定位 */
  top: 0; /* 如果需要顶部对齐,可以设置 top 为 0 */
  right: 0; /* 子元素紧贴着父元素的右边 */
  bottom: 0; /* 如果需要底部对齐,可以设置 bottom 为 0 */
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

HTML 代码示例:

<div class="parent">
  父元素
  <div class="child">子元素</div>
</div>
CSS实现div子元素在右边显示父元素不动

原文地址: https://www.cveoy.top/t/topic/ns6l 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录