css - 使用百分比设置div宽度而不限制父div宽度

标签 css

<分区>

您好,我的 HTML 中有这样的内容:

<div class="container">
    <div class="image-slider"></div>
</div>

这是我的 CSS:

.container {
        max-width: 1133px;
        margin-left: auto;
        margin-right: auto;
    }

我想将 .image-slider 的 div 宽度设置为 100%,但这里有一个问题,我希望它遵循容器的 100% 宽度,而不是遵循只有 1133px 的容器的 100% 宽度大小我的 body 标签。当然,一种解决方案是将图像 slider 从容器中取出,但由于这是一个 wordpress 站点,这种解决方案在一些复杂的主题中并不那么容易实现。有没有一种方法可以使 .image-slider 宽度 100% 跟随 body 标签的大小,而无需将其从容器包装器中取出?

最佳答案

绝对定位 div.image-slider 将使其脱离文档的正常流动,其位置将相对于具有相对位置的第一个父标签。

body{
  position: relative;
}
.image-slider{
  position: absolute;
  width: 100%;
}

关于css - 使用百分比设置div宽度而不限制父div宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32698188/

上一篇:html - 悬停时,li 元素应占据容器的全部高度

下一篇:html - CSS "background-image"在 IE8 及以下版本中不显示

相关文章:

css - 基本 CSS : Float left and inline divs

css - 仅加载 ipad 的 css 文件

javascript - ShareThis issue in IE7 - 无法选择/单击弹出表单下的任何内容

css - Bootstrap 4 位置固定宽度继承不起作用

html - Div 100% 高度适用于 Firefox 但不适用于 IE

jquery - 即使在使用边框 : none; 后也无法删除导航栏和下拉菜单之间的空间

html - 一行中的多个 div id 不显示内联

html - 如何显示和隐藏文本框边框

css - 使用 CSS 设置 SVG 元素的样式

css - Twitter Bootstrap 可滚动模式