Question

我正在使用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;
}

我希望你能帮助我。谢谢。

Answer 1

你的布局看起来像这样：

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

不要重复那十个col内容。保持它作为包装使用较小的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 -->

希望它有所帮助！

Answer 2

您可以将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设置一个backgroudcolor，所以我可以看到他们占用多少空间（特别是高度）。因为一旦div结束，所有左浮动的div将尽可能地向左移动。

Answer 3

我刚刚在jsfiddle（http://jsfiddle.net/cXXGj/）这里做了。我想你需要这种方式。我只是用class content_container将内容包装在另一个div中。看看小提琴：http://jsfiddle.net/cXXGj/

将div设置为100％的内容

3 个答案: