如何在CSS中忽略父母的宽度限制

Question

我的代码示例：

检查此链接https://jsfiddle.net/b5woxesg/

说明：

我网站的内容按这样放置，以使其始终位于页面的中心。用width:％和max-width:px表示不拉伸。由于我使用的是jekyll，因此从Markdown文件中调用了此内容。

我想做的是：每当我{% highlight %}在MD文件中调用时，生成的代码块都应该包含在其中，width: 100%而忽略了父对象的宽度限制。我的意思是整个页面的100％。另外，其中的文本应与页面内容保持一致。像这样：

但是高亮div位于带有蓝色边框的内容内。

我相信没有更改当前结构就无法执行此操作，对此我没有任何问题，但是由于我使用的是MD文件，因此可以限制某些更改。

@EDIT：解决方案：

谢谢大家的帮助。

我使用了@MD Ashik技巧，并通过保存.highlight的简单jQuery代码对其进行了改进height（因为我使用height: auto的高度可以是任何数字）。然后，我在div class="space".highlight旁边创建了一个，仅用于填充内容中的空间。所以我将.space div设置为与height.highlight 完全相同

看看：https : //jsfiddle.net/b5woxesg/7/

Answer 1

如果您不想使用定位来实现此目标，则可以执行以下操作：

HTML：

<div class="container-with-fixed-width">
    <div class="block"></div>
</div>

CSS：

.block {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

Answer 2

实时链接

是的，只能通过 CSS 进行更改。通过很少的改变：

1. 就去 上课position: absolute;吧。relative.page

2. 并在 .highlight 类中添加 CSS

   position: absolute;
   left: 0;
   

如果您需要更多内容，请发表评论来解决它。