0

現在、他に3つのdivが含まれている中央のコンテナdivがあります。それらはすべてボックスシャドウを持っています（結果として約5pxのマージンが追加されます）。

私が抱えている問題は、最初のdiv（今後）が100％の幅であり、右側で切り取られている（overflow: hidden設定されている）ことです。または、divが少し含まれていることでオーバーフローします。これは問題ありませんが、下にある他の2つのdivは横に並んでいるため、少しでもオーバーフローしません（サイズが使用可能なスペースより大きく設定されている場合、最近のdivは最新の下に移動します）。

パディングは役に立ちません。幅を98％程度に設定する以外に解決策はありますか？

これが私が使用しているcssです：

.mainSection{
    width:1020px;
    margin:70px auto 0px auto;
}

.widget{
    background-color:rgba(255, 255, 255, 0.5);
    -webkit-box-shadow:0 0 5px 2px #CCC;
    -moz-box-shadow:0 0 5px 2px #CCC;
    box-shadow:0 0 5px 2px #CCC;
    border:1px solid #CCC;
    margin:4px;
    overflow:hidden;
}

/* 3 child divs */

.widget.upcoming{
    float:left;
    width:100%;
    height:380px;
}

.widget.recent{
    float:right;
    width:260px;
    height:auto;
}

.widget.latest{
    float:left;
    width:740px;
    height:460px;
}

<section class="mainSection">
    <article class="widget upcoming">
        <header>
            <h3>Upcoming</h3>
        </header>
    </article>
    <article class="widget news">
        <article>
            <p>Some text</p>
        </article>
    </article>
    <article class="widget latest">
        <header>
            <h3>Latest</h3>
        </header>
    </article>
    <aside class="widget recent">
        <header>
            <h3>Recent</h3>
        </header>
    </aside>    
</section>
4

1 に答える 1

1

したがって、変更を変更した場合

.widget.upcoming{
   float:left;
   width:100%;
   height:380px;
}

に

 .widget.upcoming{
    height:380px;
 }

私はそれがうまくいくはずだと思います

http://jsbin.com/uharax/1

于 2012-12-30T19:35:16.643 に答える