Main Page: Difference between revisions

@@ Line 1: / Line 1: @@
 <html>
 <style>
-.prev-next{
+Красивое выравнивание блоков по резиновой сетке
-  width:100%;
+Максим Усачев 26.04.2012 62 Comments
-  max-width:1170px;
+CSS, СтатьиCSS
-  margin:0 auto;
+Сегодня, в мой день рождения (26 апреля), я хочу сделать подарок всем верстальщикам и представить вам абсолютно уникальное, новое и самое главное — полезное решение выравнивания блоков по резиновой сетке, которого так все долго ждали и которого ещё нет в сети.
-  padding-top:100px;
-}
-.prev-next a{
-  color:black;
-  font-weight:500;
-  padding-bottom: 15px;
-}
-.prev-next a:hover{
+При верстке резиновых страниц часто возникает задача выстроить однотипные блоки (например, товары в каталоге или фотографии в галерее) по сетке, наподобие таблицы, но гибкой, с заранее неизвестным количеством столбцов. Когда-то единственным способом для этого был float, и блоки приходилось прижимать к левому краю. С помощью inline-block эту задачу можно решить проще и гибче, блоки могут иметь разную высоту, и разное вертикальное выравнивание. Но почему-то такие макеты в массе всё равно прижаты к левому краю. Казалось бы, что мешает отцентрировать эту сетку, а то и вовсе растянуть ее по ширине свободного места c помощью text-align: center или justify соответственно?
-  border-bottom:1px solid black;
-}
-.prev-button{
+Проблема возникает в последней строке, на которой горизонтальный ритм сетки сбивается. Но оказалось, что эту проблему можно решить!
-  width:50%;
-  position:relative;
-  float:left;
-  text-align:left;
-}
-.next-button{
-  width:50%;
-  position:relative;
-  float:left;
-  text-align:right;
-}
+Проблема
+Для начала предлагаю обсудить этот вопрос подробнее. Посмотреть примеры того, что именно за неприятность происходит с последней строкой в сетке, а так же определиться, какого результата мы ждём.
-#ajax-content{width:100%;}
+Проблема очень похожа в обоих случаях, так что выберем любое свойство из двух, например, text-align: center. А так же воспользуемся маркированным списком.
-.portfolio-grid{
+<ul>
-  width:1170px;
+        <li>Пункт 1</li>
-  position:relative;
+        <li>Пункт 2</li>
-  margin: 30px auto;
+        <li>Пункт 3</li>
-  overflow:hidden;
+        <li>Пункт 4</li>
-}
+        <li>Пункт 5</li>
+        <li>Пункт 6</li>
-#portfolio-sidebar{
+        <li>Пункт 7</li>
-  width: 780px !important;
+        <li>Пункт 8</li>
-  padding-right: 390px;
+</ul>
+ul {
-}
+        text-align: center;
-li.grid-item{
-  width:360px;
-  position:relative;
-  float:left;
-  padding:15px;
-}
-.grid-hover{
-  position: absolute;
-  width:360px;
-  height: 100%;
-  top:0;
-  background: white;
-  z-index: 2;
-  opacity: 0;
-  -webkit-transition: all 0.2s ease-in;
-	-moz-transition: all 0.2s ease-in;
-	-ms-transition: all 0.2s ease-in;
-	-o-transition: all 0.2s ease-in;
-	transition: all 0.2s ease-in;
-}
-.grid-hover:hover{
-  opacity: 0.9;
-}
-.grid-hover h1{
-  font-size:23px;
-  bottom:80px;
-  left:40px;
-  position:absolute;
-  text-transform:uppercase;
-  color:#000000;
-  letter-spacing:1px;
-  font-weight:900;
-  line-height:50px;
-}
-.grid-hover p{
-  font-size:13px;
-  bottom:40px;
-  left:40px;
-  position:absolute;
-  color:#686868;
-  letter-spacing:1px;
-  font-weight:400;
-  line-height:50px;
-}
-li.grid-item img{
-  width:360px;
 }
+        ul li {
+                display : inline-block;
+                width : 80px;
+                height: 80px;
+                margin-bottom: 10px;
+                background: #E76D13;
+                vertical-align: top;
+                text-align: center;
+                line-height: normal;
+        }
 </style>
-<ul class="portfolio-grid">
+<ul>
+        <li>Knowledge base</li>
+         <li>Tutorials </li>
-    <li class="grid-item" data-jkit="[show:delay=3000;speed=500;animation=fade]">
+         <li>Functionality Updates</li>
-      <img src="img/portfolio/1.jpg">
+         <li>Cases</li>
-        <a class="ajax-link" href="single.html">
+</ul>
-          <div class="grid-hover">
-            <h1>Single</h1>
-            <p>Branding</p>
-          </div>
-         </a>
-    </li>
-    <li class="grid-item" data-jkit="[show:delay=3000;speed=500;animation=fade]">
-      <img src="img/portfolio/5.jpg">
-        <a class="ajax-link" href="single-fullscreen.html">
-          <div class="grid-hover">
-            <h1>Single</h1>
-            <p>Branding</p>
-          </div>
-        </a>
-    </li>
-    <li class="grid-item" data-jkit="[show:delay=3000;speed=500;animation=fade]">
-      <img src="img/portfolio/2.jpg">
-         <a class="ajax-link" href="#">
-          <div class="grid-hover">
-            <h1>Single</h1>
-            <p>Branding</p>
-          </div>
-        </a>
-    </li>
-    <li class="grid-item" data-jkit="[show:delay=3000;speed=500;animation=fade]">
-      <img src="img/portfolio/3.jpg">
-        <a class="ajax-link" href="#">
-          <div class="grid-hover">
-            <h1>Single</h1>
-            <p>Branding</p>
-          </div>
-        </a>
-    </li>
-    <li class="grid-item" data-jkit="[show:delay=3000;speed=500;animation=fade]">
-      <img src="img/portfolio/4.jpg">
-         <a class="ajax-link" href="#">
-          <div class="grid-hover">
-            <h1>Single</h1>
-            <p>Branding</p>
-          </div>
-        </a>
-    </li>
-    <li class="grid-item" data-jkit="[show:delay=3000;speed=500;animation=fade]">
-      <img src="img/portfolio/6.jpg">
-        <a class="ajax-link" href="#">
-          <div class="grid-hover">
-            <h1>Single</h1>
-            <p>Branding</p>
-          </div>
-        </a>
-    </li>
-  </ul>
-  </div>
 </html>