html - 包装器内的全 Angular 子 DIV

标签 html css responsive-design

我就直奔主题吧。 我有一个宽度为 100% 的子 div,它位于具有固定宽度的 wrapper 下。我想知道如何让子 div“突破”并具有 100% 全屏页面宽度。 代码是这样的,我尝试使用相对/绝对定位但没有成功。

<div class="wrapper">
    <div class="banners">
        <div class="first"><img src="http://placehold.it/200x200"></div>
        <div class="second"><img src="http://placehold.it/200x200"></div>
    </div>
</div>

可以找到Fiddle here

除了“横幅”div 之外,该 div 的上方和下方还有几个部分,这就是“横幅”在包装器中的原因

最佳答案

您可以将绝对位置添加到 .banners,但这会将 .banners 容器定位在与上述元素相关的绝对位置。

.banners {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}

一个例子:http://jsfiddle.net/qMYQw/

关于html - 包装器内的全 Angular 子 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24656468/

相关文章:

java - JSP 中的隐藏输入在 Java Servlet 中返回 null - 为什么?

javascript - Revolution Responsive jQuery Slider 图像宽度和高度变化

Javascript:如何获取函数的值?

css - 响应式设计和clearfix

html - 居中背景超大屏幕图像并使其移动响应

html - 使用纯 CSS,是否可以使容器的字体大小与其宽度或高度成正比?

php - 从 PHP 发送 HTML 电子邮件

javascript - 固定菜单中的下拉菜单

CSS - 响应式柔性布局

jquery - 使用 MVC 从脚本和/或 Razor 模型 View 中显示和隐藏元素