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

要素をその親要素の外に表示したい場合は、否定を使用する必要があります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;
}

Answer 3

まず第一に、それはとても良いデザインだと言いたいです:-)今、私が仮定しているように

あなたが使用することができます

`position:absolute` 

これを達成するために、これはうまくいきます

Answer 4

コンテナを閉じ、異なる設定をしたい行に新しい div を作成し、下部のコンテナを再度開きます。