Всем привет. Прочитал на тему верстки уже не мало статей, в частности темы на этом сайте, но все равно есть вещи которые мне не понятно.
В качестве практики верстаю сайт портфолио для фотографа. Если с верхними блоками все более менее понятно. То с сеткой проблема. У меня получилось вот так:
Выглядит нормально. Но когда уменьшаешь окно браузера, то последний флоат перескакивает вниз, по понятным причинам - мало места.
И в целом вся сетка становится не по центру. Как это решить?
Вот код:
<html>
<head>
<title>Photography portfolio</title>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="header">
<div class="nav-left"><p>Logotype</p></div>
<div class="nav-right">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Logout</a></li>
</ul>
</div>
</div>
<div class="content"></div>
<div class="sort"></div>
<div class="grid">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
</body>
</html>
@import url(http://fonts.googleapis.com/css?family=Raleway);
a{
font-family: 'Raleway', sans-serif;
text-decoration: none;
color: #999;
}
p{
font-family: 'Raleway', sans-serif;
color: #999;
}
body{
background-color: #FFFFFF;
margin: 0 auto;
}
.header {
width: 100%;
height: 80px;
background-color: #FFFFFF;
}
.content {
width: 100%;
height: 300px;
background-color: #C5c5c5;
}
.sort {
width: 100%;
height: 50px;
background-color: #FFFFFF;
}
.grid{
max-width: 1100px;
min-width: 600px;
margin: 0 auto;
}
.column{
background-color: #c5c5c5;
width: 200px;
height: 200px;
float: left;
margin: 10px;
}
.clearfix{
clear: both;
}
.block{
margin: 0 auto;
}
li{
display: inline;
}
ul{
padding-top: 12px;
}
ul a{
padding: 5px;
}
.nav-left{
width: 200px;
height:200px;
float: left;
padding: 13px;
}
.nav-right{
width: 400px;
height:200px;
float: left;
}
Может вы предложите координально другой метод, буду только рад.
Вот нашел гениальную статью про вертку сетки как на Pinterest -
w3bits.com/css-masonry
Попробовал - все шикарно работает, но единственный минус - блоки идут сверху вниз. Может как то меняется это?
И вообще замечаю за собой, что часто сомневаюсь в каком вариенте сверстать тот или ной объект, то есть я знаю как, но какой лучше вариант выбрать затрудняюсь. Посоветуйте какую-нибудь занятную литературу на этот счет, интересно было бы почитать.
Спасибо заранее каждому!
