扩展事业部为母公司没有切缘阴性

我想有一个孩子的div延伸到是因为它是父亲的父亲相同的宽度。因此，与HTML的结构是这样的：扩展事业部为母公司没有切缘阴性

<div class="pp"> 
    <div class="p"> 
    <p> 
    Some text 
    </p> 
    <div class="c"> 
     This is the thingy! 
    </div> 
    <p> 
    Some more text 
    </p> 
    </div> 
</div>

我想div.c延伸到的div.pp边界。

我知道这是可能的切缘阴性，但在我的情况，我不知道div.pp事先的利润率。我知道我可以写一些JavaScript来做到这一点，但我对CSS只有解决方案感兴趣。我也知道改变HTML的结构可以解决这个问题，但是这也不是一个选项。

这里是表示HTML和一些有益的CSS拨弄：

https://jsfiddle.net/y37mLkzu/1/

有那里与负边缘固定这个的一个例子。

来源

2017-06-06 thatidiotguy

不幸的是，给你在的地方的约束上，JS是唯一的答案（CSS自定义属性AKA CSS变量除外）。 –

**除非**这是纯粹的视觉效果，在这种情况下，您可能会伪造某些伪元素。我看到有人指出了这个选择。这些方针的东西 - https://stackoverflow.com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen?lq=1 –

@Paulie_D这不是一个完全这种情况的意外结果。谢谢参观。 – thatidiotguy

我不知道这是否会在你的情况下工作，但它是不使用固定的负利润率只有使用纯CSS的唯一办法了。我已经加入:before和:after到.c和绝对定位在它们在.c元件的任一侧上。我还添加了隐藏到.pp包装的溢出，以切断多余的绝对定位元素。

p { 
 
    margin:0; 
 
} 
 
.pp { 
 
    padding: 0 6px 0 6px; 
 
    width: 100px; 
 
    background-color: black; 
 
    overflow: hidden; 
 
} 
 
.p { 
 
    background-color:white; 
 
} 
 
.c { 
 
    background-color:red; 
 
    position: relative; 
 
} 
 
.c:before, .c:after { 
 
    content:""; 
 
    position: absolute; 
 
    top:0; 
 
    background: red; 
 
    height:100%; 
 
    width:100%; 
 
} 
 
.c:before { 
 
    left:-100%; 
 
} 
 
.c:after { 
 
    right:-100%; 
 
}

<div class="pp"> 
 
    <div class="p"> 
 
    <p> 
 
    Some text 
 
    </p> 
 
    <div class="c"> 
 
     This is the thingy! 
 
    </div> 
 
    <p> 
 
    Some more text 
 
    </p> 
 
    </div> 
 
</div>

来源

2017-06-06 14:34:50 WizardCoder

这正是我寻找的解决方案的类型。我甚至没有想过要使用伪元素。伟大的工作，并感谢你。 – thatidiotguy

-1

广东话您使用的位置？只是好奇知道。如果我使用position:absolute，它将起作用。

来源

2017-06-06 13:32:35 Archana

你能提供一个例子吗？这似乎更像是评论而不是答案。我将如何使用'position'来完全解决这个问题？ – thatidiotguy

我是这样想的：.c {position：absolute; left：8px} – Archana

由于以下几个原因，根本不起作用：1）它在.pp的边界上向右延伸。 2）它要求您根据.pp的填充值对硬币进行硬编码，这与我概述的要求相反。 https://jsfiddle.net/y37mLkzu/2/ – thatidiotguy

扩展事业部为母公司没有切缘阴性

回答

相关问题