使元素和祖父母一样宽 [英] Make an element as wide as the grandparent
本文介绍了使元素和祖父母一样宽的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有以下标记,其中 #content
宽80%,并包含 .slide
元素。我想要幻灯片与他们的祖父母一样宽(即在这个例子中的身体)。这是我有且无法更改的标记:
I have the following markup where #content
is 80% wide and contains .slide
elements. I want the slides to be as wide as their grandparent (i.e. body in this example). This is the markup I have and it cannot be changed:
body {
margin: 0;
font: medium monospace;
background: lightgray;
}
#content {
margin: auto;
width: 80%;
background: white;
}
#content:before,
#content:after {
content: "";
display: table;
}
.slide {
height: 6em;
background: indianred;
}
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<blockquote>
<p>Phasellus euismod dolor imperdiet!</p>
</blockquote>
<div class="slide">Donec mauris tellus</div>
<p>Pellentesque sit amet venenatis diam, at interdum tortor.</p>
<ul>
<li>Quisque ornare mi in pharetra porttitor.</li>
<li>Nulla ultrices quam nec vehicula porta.</li>
</ul>
</div>
:
- 相对绝对定位,需要修正幻灯片的高度(幻灯片包含可变长度文字)
- 在段落而不是内容上设置80%的宽度,但这不是优雅(内容包含的元素不能有80%宽度或10%左边距)
推荐答案
如果您的周边内容可以自行要求不同的定位属性组合,那么您可以随时使用以下内容。
If your surrounding content can demand a different combination of positioning properties on their own, you could always go with the following.
body {
margin: 0;
font: medium monospace;
background: lightgray;
}
#content {
margin: auto;
width: 80%;
background: white;
}
#content:before,
#content:after {
content: "";
display: table;
}
.slide {
height: 6em;
background: indianred;
width: 125%; /*100*(100/80)*/
margin-left: 50%;
transform: translateX(-50%);
}
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="slide">Donec mauris tellus</div>
<p>Pellentesque sit amet venenatis diam, at interdum tortor.</p>
</div>
这篇关于使元素和祖父母一样宽的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文