Добрый день. Хочу реализовать следующее.
На странице выводится список пользователей. Каждый пользователь это фактически блок с фоткой и информацией. Хочу сделать так что бы эти блоки выводились в ряд в зависимости от размера экрана(если уже не влазит то выводится на новой строке) но и при этом были выровнены по центру.
Вот код:
| Код |
<div id="users">
<span class="users_list">
<img src="images/photo.jpg" alt="" /><br/>
<a href="#" class="dark_link">Test</a><br/>
<span class="users_info">
<span class="users_info_city">Test</span>
<span class="users_info_rating">Rating: <span class="users_info_rating_positive">1.5</span></span>
</span>
</span>
<span class="users_list">
<img src="images/photo.jpg" alt="" /><br/>
<a href="#" class="dark_link">Test</a><br/>
<span class="users_info">
<span class="users_info_city">Test</span>
<span class="users_info_rating">Rating: <span class="users_info_rating_positive">1.5</span></span>
</span>
</span>
...
</div>
|
| Код |
#users {
float: left;
width: 100%;
text-align: center;
margin: 0 auto;
}
.users_list {
width: 234px;
height: 256px;
margin-top: 15px;
margin-left: 20px;
display: block;
float: left;
background:url('images/polaroid_bg.png') no-repeat scroll 0 0 transparent;
}
.users_list img {
margin-top: 16px;
}
.users_info {
display: block;
width: 234px;
float: left;
margin-top: 15px;
color: #646464;
}
.users_info_city {
display: block;
width: auto;
float: left;
padding-left: 5px;
font-weight: bold;
}
.users_info_rating {
display: block;
width: auto;
float: right;
padding-right: 5px;
}
.users_info_rating_positive {
color: #6CC127;
font-weight: bold;
}
.users_info_rating_negative {
color: #D2420C;
font-weight: bold;
}
|
Сейчас получается что не выполняется условия что бы блоки были по центру. А сделать спаны инлайном нельзя, потому что тогда внутренняя разметка блока не будет работать.
Возможно это делается элементрано, но я в верстке не силен. Буду рад помощи. |