html – 使元素与祖父母一样宽

概述我有以下标记,其中#content是80％宽并包含.slide元素.我希望幻灯片和祖父母一样宽(即本例中的正文).这是我的标记,无法更改： body { margin: 0; font: medium monospace; background: lightgray;}#content { margin: auto; width: 80%; background: wh 我有以下标记,其中#content是80％宽并包含.slIDe元素.我希望幻灯片和祖父母一样宽(即本例中的正文).这是我的标记,无法更改：

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 >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％左边距的元素)

解决方法 如果您的周围内容可以自己要求不同的定位属性组合,则可以始终使用以下内容.

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 >Donec mauris tellus</div>  <p>Pellentesque sit amet venenatis diam,at interdum tortor.</p></div>

总结

以上是内存溢出为你收集整理的html – 使元素与祖父母一样宽全部内容，希望文章能够帮你解决html – 使元素与祖父母一样宽所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。