Проблема макета CSS Fluid Grid

Question

У меня есть контейнер с максимальной шириной для моего макета.Внутри него у меня есть много плавающих блоков фиксированной ширины, если быть точным, в 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;
}

Буду рад некоторым идеям!

Answer 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/

Answer 2

Обновление:

Код, демонстрирующий «выравнивание 1» (чистый CSS) И «выравнивание 2» (требуется JavaScript), теперь добавлен ниже.

---

Не тот ответ, который вам нужен, но AFAIR, вы не можете сделать это с помощью CSS и плавного макета.
Вы можете центрировать div#bricks контент, если вы хотите мириться с таким типом выравнивания:
(1)

■■■■■
 ■■■

Но не:
(2)

■■■■■
■■■

Чтобы сделать последнее, вам понадобится javascript для:

1. Измерьте размер div#bricks. ( ContainerSize * * тысяча двадцать-одина) * * тысяча двадцать-дв Измерьте размер человека div.brick. ( BrickSize )
2. Вычислить «margin» = ContainerSize % BrickSize .
3. Добавить div.brick s стиль с: left: {margin / 2}.

Конечно, я бы хотел быть неправым.

---

Код для "выравнивания 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>