如何允许元素离开其父元素

Question

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

这是粉红色的盒子，标题为“From the journal”

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;
}