Как равномерно распределить блоки одинаковой ширины в резиновой сетке
HTML-код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Вариант с псевдоэлементом</title> </head> <body> <h1><span>text-align: center</span></h1> <div class="test-box"> <ul class="center"> <li>Пункт 1</li> <li>Пункт 2</li> <li>Пункт 3</li> <li>Пункт 4</li> <li>Пункт 5</li> <li>Пункт 6</li> <li>Пункт 7</li> </ul> </div> <h1><span>text-align: justify</span></h1> <div class="test-box"> <ul class="justify"> <li>Пункт 1</li> <li>Пункт 2</li> <li>Пункт 3</li> <li>Пункт 4</li> <li>Пункт 5</li> <li>Пункт 6</li> <li>Пункт 7</li> </ul> </div> </body> </html> |
CSS код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
body { max-width: 820px; margin: 0 auto; font: 0.8125em/1 Verdana,sans-serif; background: #fff; } h1 { font: 1.8em Georgia,Times,serif; margin-bottom: 0.5em; color: #E76D13; text-align: center; } h1 span { color: #000;} .test-box { background: #F8F7EF; border: 1px dashed #000; border-bottom: 1px dashed #000; padding: 10px 0; } .test-box:after { overflow: hidden; content: ''; display: block; clear: both; height: 0; font-size: 0; } ul { margin: 0; padding: 0; list-style: none; } .test-width { background: #E4C17D; text-align: center; padding: 5px 0; margin: 10px auto 0px; } /* CSS для примера */ ul { font: 14px Verdana, Geneva, sans-serif; /* Подтягиваем "хвост" */ margin-bottom: -45px; } ul.center { text-align: center; } ul.justify { text-align: justify; } ul.cross { text-align: center; /* Лекарство для IE6-7*/ //text-justify: newspaper; //text-align-last: justify; } ul.center:after, ul.justify:after { content: ' i i i i i i i i i i i i i i'; word-spacing: 97px; padding-left: 97px; visibility: hidden; height: 0; overflow: hidden; } ul li { display : inline-block; width : 100px; height: 100px; margin: 0 0 10px; background: #E76D13; vertical-align: top; /* эмуляция inline-block для IE6-7*/ //display : inline; //zoom : 1; /* Корректировка для IE6-7*/ //margin-right: 5px; } .helper { word-spacing: 97px; padding-left: 97px; visibility: hidden; display: inline; width: auto; height: auto; background: none; /* Корректировка для IE6-7*/ //margin-left: 5px; /* Возврат zoom в значение по умолчанию*/ //zoom: normal; } |