2

私は 1120px の CSS レスポンシブ フレームワーク レスポンシブを使用しているか、必要なときにいつでも固定グリッドとして機能できます。

全幅の背景色を適用したい 1120px コンテナー div 内に div があります。

もちろん、div の背景色はコンテナー div 内のみであり、body 要素の全幅を塗りつぶしたいと考えています。

問題は、ショートコードによって div が自動的に生成されるため、外側の div を作成して 100% 幅に設定できないことです。

ショートコードのマークアップは次のとおりです。

<div class="toggle-default">
    <div class="toggle">
<div class="toggle_title toggle_active">LINE-UP</div>
<div class="toggle_content" style="display:block;">Lorem ipsum sit dolor amet</div>

</div>
    </div>

そしてこのcss：

.toggle{ margin-bottom: 5px; 
clear: both; float: left; 
position: relative;  
width: 100%;                
}
.toggle .toggle_title {
position: relative;
font-size: 112.5%;
font-weight: 700;
padding-bottom: 15px;
padding-left: 25px;
text-decoration: none;

}

ここにフィドルがあります

問題は、このマークアップが幅 1120px のコンテナー div の下にあることです。.toggle .toggle_title position:absolute;を追加することを考えていました。たとえば、最小幅を 1480px に設定すると、すべてが壊れます。

この種の問題に対するより良いアプローチであると確信しています。これを機能させる方法について、誰かが私にいくつかのヒントを教えてもらえますか? ありがとうございました！

4

2 に答える 2

3

これは、これを行うための本当に醜い方法です。誰かがこれに反対票を投じることを期待してこれを投稿しています...しかし、うまくいきます。

ここにフィドルがありますhttp://jsfiddle.net/5mn22/8/

これを CSS に追加します。

.toggle_title, .toggle_content {
    position:relative;
    z-index:2;
}

.toggle:before {
    content:"";  
    width:4000px;
    position:absolute;
    height:100%;
    background-color:red;
    left:-50%;
    z-index:1
}

基本的には、予想される画面解像度のサイズの 2 倍の幅で div の前に null コンテンツを追加し、左 50% に配置して、距離全体を確実に伸ばすだけです。

どう思いますか？

于 2013-04-09T21:51:29.977 に答える