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

ruarlubt 于 2022-12-15 发布在其他

关注(0)|答案(1)|浏览(106)

我试图在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/

css

来源：https://stackoverflow.com/questions/74743374/how-to-do-absolute-positioning-an-element-with-two-different-target-for-left-a

1条答案

按热度按时间

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像素不堆叠在对方。

赞(0）回复(0）举报 2022-12-15

我来回答

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

1条答案

相关问题

热门标签

最新问答