CSS流体网格布局问题

时间：2010-06-13 00:10:12

标签： css css-float

我的布局有一个基于max-width em的容器。在其中我有许多浮动固定宽度的盒子，确切地说是230px。

在最大宽度处，容器将扩展到90em。这个合身的每盒6盒完美。当窗口尺寸向下并且盒子撞到下面的行时，它在右边留下一个非对称的间隙。我理解为什么。但我想强迫盒子的容器始终居中。

举例说明：

全宽：http://cl.ly/7393a462f44b8315aaba

宽度较小：http://cl.ly/ff48a18d39c4f57c3513

如何我想要更小的宽度：http://cl.ly/ae9c3fd04df515253b2d（Photoshoped）

我的标记看起来像这样：

   <div id="bricks" class="group">
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
   </div><!--end #bricks-->

我的CSS是：

div#bricks {
margin:0 auto;
background:red;
width:100%;
}

div.brick {
background:#181c21;
width:230px;
margin:0 5px 10px 5px;
position:relative;
float:left;
}

div.brick img {
background:#666;
max-width:230px;
}

#bricks位于#main中，如下所示：

div#main {
margin:0 auto;
padding:0 50px;
position:relative;
max-width:90em;
}

#bricks上的小组课程是：

.group:after {
content:".";
clear:both;
display:block;
height:0;
visibility:hidden;
}

会喜欢一些想法！

2 个答案:

答案 0 :(得分：1)

更新

演示“对齐1”（纯CSS）和“对齐2”（需要javascript）的代码现在附加在下面。

不是你想要的答案，但是AFAIR，你不能用CSS和流畅的布局来做到这一点 如果您愿意忍受这种对齐，您可以将div#bricks内容放在中心位置：
（1）

■■■■■
 ■■■

但不是：
（2）

■■■■■
■■■

要做后者，你需要javascript来：

  1. 衡量div#bricks的大小。 （ ContainerSize ）
  2. 衡量个人div.brick的大小。 （ BrickSize ）
  3. 计算“margin”= ContainerSize ％ BrickSize 。
  4. 使用div.brick附加left: {margin / 2}的样式。

    5. 当然，我很想被证明是错的。

    “对齐1”的代码：

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
    <title>Flexiblock, Centered Layout, CSS only</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <style  type="text/css">
        div#main {
        margin:0 auto;
        padding:0 50px;
        position:relative;
        max-width:90em;

        /*-- Added styles, below --
        */
        color:white;
        }

        .group:after {
        content:".";
        clear:both;
        display:block;
        height:0;
        visibility:hidden;
        }

        div#bricks {
        margin:0 auto;
        background:red;
        width:100%;

        /*-- Added styles, below --
        */
        text-align:center;
        }

        div.brick {
        background:#181c21;
        width:230px;
        position:relative;

        /*-- Deleted
        float:left;
        margin:0 5px 10px 5px;
        */

        /*-- Added styles, below --
        */
        display: inline-block;
        text-align:left;
        margin:0 2px 10px 2px;
        }

        div.brick img {
        background:#666;
        max-width:230px;
        }
    </style>

    <!--[if lte IE 7]>
    <style  type="text/css">
        div.brick {
        display: inline;
        }
    </style>
    <![endif]-->
</head>

<body>
<div id="main">
  <div id="bricks" class="group">
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
   </div><!--end #bricks-->
</div>
</body>
</html>

    。

    “对齐2”的代码：

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
    <title>Flexiblock, Centered Layout, needs JS</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <style  type="text/css">
        div#main {
        margin:0 auto;
        padding:0 50px;
        position:relative;
        max-width:90em;

        /*-- Added styles, below --
        */
        color:white;
        }

        .group:after {
        content:".";
        clear:both;
        display:block;
        height:0;
        visibility:hidden;
        }

        div#bricks {
        margin:0 auto;
        background:red;
        width:100%;
        }

        div.brick {
        background:#181c21;
        width:230px;
        margin:0 5px 10px 5px;
        position:relative;
        float:left;
        }

        div.brick img {
        background:#666;
        max-width:230px;
        }
    </style>

    <!-- Our javascript requires jQuery. -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">
    function CenterBrickSet ()
    {
        /*---
               1. Measure the size of div#bricks. (ContainerSize)
               2. Measure the size of an individual div.brick. (BrickSize)
               3. Compute the "margin" = ContainerSize % BrickSize .
               4. Append div.bricks style with: left: {margin / 2} .

               Requires jQuery (for cross-browser use).
        */
        var iContainerWidth     = $('#bricks')[0].clientWidth;

        /*---   Get the "brick" width by comparing the left offsets of the first two bricks.  This
                accounts for margin.
        */
        var zBrickSet           = $('.brick');
        var iBrickWidth         = zBrickSet[1].offsetLeft  -  zBrickSet[0].offsetLeft;
        if (!iBrickWidth)
            iBrickWidth         = zBrickSet[0].clientWidth + 10; //-- 10 is total margin width from the style (pixels).

        var iMarginAdjust       = (iContainerWidth % iBrickWidth) / 2;

        /*-- Set each brick's left position.  Alternatively adjust the global style.
        */
        zBrickSet.each
        (
            function () {$(this)[0].style.left  = iMarginAdjust + 'px';}
        );
    }


    $(document).ready (CenterBrickSet);
    </script>
</head>

<body>
<div id="main">
  <div id="bricks" class="group">
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
   </div><!--end #bricks-->
</div>
</body>
</html>

答案 1 :(得分：1)

尝试将您的两个声明更改为：

div#bricks {
margin:0 auto;
background:red;
width:100%;
text-align: center; /* Centers it's inline children. */
}

div.brick {
display: inline-block; /* Makes it act like a inline/block mutant. */
background:#181c21;
width:230px;
margin:0 5px 10px 5px;
position:relative;
}

此代码的唯一问题是内联块支持是模糊的。但是你可以阅读这篇文章来解决这个问题：http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

相关问题
最新问题