VPF::Верстка списка товаров по три в ряд

InfMag

Дата 6.6.2011, 17:44 (ссылка)

(нет голосов)

Загрузка ...

…

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 21.11.2004

Репутация: нет
Всего: 4

olldman, охтыж! Действительно! Столько живу и не знал) Круто!

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>markup</title>
    <style type="text/css">
        * { margin:0; padding:0; }
        html, body { height:100%; }
        
        .productsContainer {
            width: 640px;
            background: gray;
            margin: 0 auto;
            overflow: hidden;
        }
        
        .product {
            width: 200px;
            height: 200px;
            margin-right: 20px;
            margin-bottom: 20px;
            background: silver;
            float: left;
        }
        
        .product:nth-child(3n) {
            margin-right: 0;
        }
    </style>
    <!--[if IE]>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $('.productsContainer').each(function () {
                    $(this).find('.product:nth-child(3n)').css('margin-right', '0');
                });
            });
        </script>
    <![endif]-->
</head>
<body>
    <div class="productsContainer">
        <div class="product"></div>
        <div class="product"></div>
        <div class="product"></div>
        <div class="product"></div>
        <div class="product"></div>
        <div class="product"></div>
        <div class="product"></div>
        <div class="product"></div>
        <div class="product"></div>
        <div class="product"></div>
        <div class="product"></div>
    </div>
</body>
</html>

Только единственное, margin-bottom в 6-ом (сами знаете чём) не происходит и блоки прибиваются плотно к низу. В 7-ом возможно тоже, но у меня он что-то глюкнул в IE тестере и не могу проверить.

Добавлено через 5 минут и 29 секунд
Но в данном случае полагаемся на JS для IE, так что это решаемо)

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>markup</title>
    <style type="text/css">
        * { margin:0; padding:0; }
        html, body { height:100%; }
        
        .productsContainer {
            width: 640px;
            background: gray;
            margin: 0 auto;
            overflow: hidden;
        }
        
        .product {
            width: 200px;
            height: 200px;
            margin-right: 20px;
            margin-bottom: 20px;
            background: silver;
            float: left;
        }
        
        .product:nth-child(3n) {
            margin-right: 0;
        }
    </style>
    <!--[if IE]>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $('.productsContainer').each(function () {
                    $(this).find('.product:nth-child(3n)').css('margin-right', '0');
                    $(this).append('<div style="clear:both;"></div>');
                });
            });
        </script>
    <![endif]-->
</head>
<body>
    <div class="productsContainer">
        <div class="product"></div>
        <div class="product"></div>
        <div class="product"></div>
        <div class="product"></div>
        <div class="product"></div>
        <div class="product"></div>
        <div class="product"></div>
        <div class="product"></div>
        <div class="product"></div>
        <div class="product"></div>
        <div class="product"></div>
    </div>
</body>
</html>

Вот и самый идеал по данной задаче.

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »