css 如何绝对定位一个有两个不同目标的元素的左和右属性?

ruarlubt  于 2022-12-15  发布在  其他
关注(0)|答案(1)|浏览(115)

我试图在CSS中得到一个复杂的结果。看潜在的不可能。
让我们想象一下下面的代码:

<div class="div1">
  <div class="div2">
    <div class="div3">
      <div class="div4"></div>
      Hello World
    </div>
  </div>
</div>
div {
  box-sizing: border-box;
  outline: 1px solid rgba(0, 0, 0, 0.5);
}

.div1 {
  background: rgba(255, 0, 0, 0.5);
}

.div2 {
  width: 800px;
  margin: 0 auto;
  
  display: flex;
  
  background: rgba(0, 255, 0, 0.5);
}

.div3 {
  position: relative;
  background: rgba(0, 0, 255, 0.5);
}

.div4 {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  
  background: rgba(255, 0, 255, 0.5);
}

我希望.div4的左边缘与.div1的左边缘接触,.div4的右边缘与.div3的右边缘接触。
Current result
If position: relative; is given to .div1
Expected result
如果你有另一个解决方案来达到同样的结果,我很感兴趣!
https://jsfiddle.net/610xL7j4/78/

2uluyalo

2uluyalo1#

也许我错了,但是为什么,你不想用3个div元素做它?

<div class="div1">
  <div class="div2">
    <div class="div3">
      Hello world
    </div>
  </div>
</div>
div {
  box-sizing: border-box;
  outline: 1px solid rgba(0, 0, 0, 0.5);
}

.div1 {
  background: rgba(255, 0, 0, 0.5);
  display: flex;
  justify-content: center;
}

.div2 {
  width: 800px;
  margin: 0 auto;
  
  background: rgba(0, 255, 0, 0.5);
}

当你完成这个操作后,在div3中输入文本hello world,给予div3你想要的背景色。

.div3 {
  background-color: purple;
}

对于css,我会做一些不同的事情:

.div1{
  background: rgba(255, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  border: 1px solid black
}

.div2 {
  width: 800px;
  margin: 0 auto;
  border-left: 1px solid black;
  border-right: 1px solid black;
  background: rgba(0, 255, 0, 0.5);
}

.div3 {
  background-color: purple;
  border-right: 1px solid black;
}

我认为这应该做的伎俩,并与此,边界无处不在将完全1像素不堆叠在对方。

相关问题