html - 如何允许元素脱离其父元素

Question

我在一个宽度为 960px 的容器中有一个右浮动 div，我希望它有更大的宽度，但不允许滚动显示，这是一张图片：

这是一个粉红色的盒子，标题是“来自期刊”

Answer 1

这里有一个工作示例：http: //jsfiddle.net/QBmKm/。它用overflow: hidden;

<div class="container">
    ceva
</div>

<div class="wrapper">
    <div class="container">
        <div class="left">
            left
        </div>
        <div class="right">
            <div class="box">
                ceva
            </div>
        </div>
        <br style="clear: both;">
    </div>
</div>

<div class="container">
    ceva
</div>

而CSS是

.container {
    width: 400px;
    margin: auto;
    background: gray;
    padding: 10px 0;
    margin-bottom: 30px;
}
.left {
    float: left;
    width: 200px;
}
.right {
    float: left;
    width: 200px;
}
.box {
    width: 9999px;
    background: red;
    padding: 50px 0;
}
.wrapper {
    overflow: hidden;
}

Answer 2

首先，我想说这是非常好的设计:-) 现在就像我假设的那样

您可以使用

`position:absolute` 

为了实现这一目标，这将起作用

Answer 3

关闭容器，为要具有不同设置的行创建一个新的 div，然后再次打开容器的底部。

Answer 4

如果你想让一个元素显示在它的父元素之外，你需要使用负数margin。

<div>
  <div id="outercontainer">
    <div id="biggerelement">
      asdfasdfasdfasdf
    </div>
  </div>
</div>

使用 CSS：

#outercontainer {
  width: 500px;
  margin-left: auto;
  margin-right: auto; //center the outer container
  border: 1px solid blue; //just to show it
}

#biggerelement {
  margin-left: -50px; //The element will start 50 pixels left from it's parent element
  margin-top: 5px; //...and 5 pixels below the edge of it's parent
  border: 1px dotted yellow;
}