2

1140pxの流体グリッド（cssgrid.net）レイアウトを使用しています。

問題が発生しています。

私のレイアウトは次のようになります。

Side Menu - Content
          - Content
          - Content
          - Content
          - etc. etc.

私の問題は、私のレイアウトが次のようになっていることです。

Side Menu - Content
Content
Content
Content
Content
etc. etc.

私が欲しいので、私の「サイドメニュー」はフルハイトなので、コンテンツを「右」にプッシュします。

私のレイアウト（12列の存在）：

<div class="container">

  <div class="row">
    <div class="twocol">
    -- Side Menu Content Here --
    </div><!-- END 2col --> 

    <div class="tencol last">
    content content content
    </div> 
    <div class="tencol last">
    content content content
    </div> 
    <div class="tencol last">
    content content content
    </div> 
    <div class="tencol last">
    content content content
    </div> 
  </div><!-- END .row -->  
</div><!-- END .container -->

CSSは次のとおりです。

.container {
padding-left: 20px;
padding-right: 20px;
}

.row {
width: 100%;
/*max-width: 1140px; */
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}

.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol {
margin-right: 3.8%;
float: left;
min-height: 1px;
}

.row .onecol {
width: 4.85%;
}

.row .twocol {
width: 13.45%;
}

.row .threecol {
width: 22.05%;
}

.row .fourcol {
width: 30.75%;
}

.row .fivecol {
width: 39.45%;
}

.row .sixcol {
width: 48%;
}

.row .sevencol {
width: 56.75%;
}

.row .eightcol {
width: 65.4%;
}

.row .ninecol {
width: 74.05%;
}

.row .tencol {
width: 82.7%;
}

.row .elevencol {
width: 91.35%;
}

.row .twelvecol {
width: 100%;
float: left;
}

.last {
margin-right: 0px;
}

あなたが私を助けてくれることを願っています。ありがとうございました。

4

3 に答える 3

3

レイアウトは次のようになります。

body
+------------------------------------------------------------+
| two col content   ten col content                          |
| +--------------+ +---------------------------------------+ |
| |              | |                                       | |
| |              | |                                       | |
| +--------------+ +---------------------------------------+ |
| +---------------------------------------+                  |
| |   ten col content                     |                  |
| |                                       |                  |
| +---------------------------------------+                  |
| +---------------------------------------+                  |
| |   ten col content                     |                  |
| |                                       |                  |
| +---------------------------------------+                  |
| +---------------------------------------+                  |
| |   ten col content                     |                  |
| |                                       |                  |
| +---------------------------------------+                  |
| +---------------------------------------+                  |
| |   ten col content                     |                  |
| |                                       |                  |
| +---------------------------------------+                  |
| +---------------------------------------+                  |
| |   ten col content                     |                  |
| |                                       |                  |
| +---------------------------------------+                  |
+------------------------------------------------------------+

その 10 列の内容を繰り返さないでください。ラッパーとして保持し、より小さな div を使用します。このような：

body
+------------------------------------------------------------+
| two col content   ten col content                          |
| +--------------+ +---------------------------------------+ |
| |              | | +-----------------------------------+ | |
| |              | | |                                   | | |
| +--------------+ | |                                   | | |
|                  | +-----------------------------------+ | |
|                  | +-----------------------------------+ | |
|                  | |                                   | | |
|                  | |                                   | | |
|                  | +-----------------------------------+ | |
|                  | +-----------------------------------+ | |
|                  | |                                   | | |
|                  | |                                   | | |
|                  | +-----------------------------------+ | |
|                  | +-----------------------------------+ | |
|                  | |                                   | | |
|                  | |                                   | | |
|                  | +-----------------------------------+ | |
|                  | +-----------------------------------+ | |
|                  | |                                   | | |
|                  | |                                   | | |
|                  | +-----------------------------------+ | |
|                  +---------------------------------------+ |
+------------------------------------------------------------+

HTML コードが必要な場合は、

<div class="container">

    <div class="row">
        <div class="twocol">
        -- Side Menu Content Here --
        </div><!-- END 2col --> 

        <div class="tencol last">
            <div>
                content content content
            </div>
            <div>
                content content content
            </div>
            <div>
                content content content
            </div>
            <div>
                content content content
            </div>
        </div> 
    </div><!-- END .row -->  
</div><!-- END .container -->

それが役に立てば幸い！

于 2012-06-06T09:19:16.237 に答える
0

ここで jsfiddle ( http://jsfiddle.net/cXXGj/ ) でそれを行いました。この方法が必要だと思います。クラス content_container を使用して、コンテンツを別の div 内にラップしました。フィドルを見てください：http://jsfiddle.net/cXXGj/

于 2012-06-06T09:31:56.703 に答える
0

height: 100%menu-div (twocol) に追加できます。それはそれを行う必要があります。

いずれにせよ: div の構造を少し変更した方が良いかもしれません:

<div class="menu">
-- Side Menu Content Here --
</div>

<div class="content">
    <div class="tencol last">
    content content content
    </div> 
    <div class="tencol last">
    content content content
    </div> 
    <div class="tencol last">
    content content content
    </div> 
    <div class="tencol last">
    content content content
    </div> 
</div>

私の経験では、メニュー、コンテンツ、ヘッダー、フッターを含む個別の div があると、レイアウトが簡単になります。

float を使用する場合、開発中に div に背景色を設定することが多いので、div がどのくらいのスペースを占めるか (特に高さ) を確認できます。div が終了するとすぐに、すべての左のフローティング div が可能な限り左に移動するためです。

于 2012-06-06T09:19:24.210 に答える