|
|
Пост #1 написан 20.01.2015 в 13:48
Шаг 1 - Установим HTML:
Для начала нам следует установить HTML каркас, для этого в вид материалов нужного вам модуля устанавливаем следующий код:
<div class="cell-news"> <?if($IMG_URL1$)?><img alt="$TITLE$" src="$IMG_URL1$" class="news-img"><?endif?> $MESSAGE$
</div>
Основная задача - это прописать картинки в ячейки новостей нужный касс news-img.
Шаг 2 - Установим JS:
Далее на страницу где отображаются новости сайта, в самый низ перед закрывающим тегом устанавливаем следующий JS:
<script language="javascript"> $(document).ready(function() { $('.cell-news:odd').addClass('news-r'); $('.cell-news:even').addClass('news-l'); });
</script>
Шаг 3 - Установим CSS:
.news-img{ width:250px; height:100px; } .news-l .news-img{float:left; margin: 0 15px 10px 0;} .news-r .news-img{float:right; margin: 0 0 10px 15px;}
Если вы по каким то причинам не хотите в данном решении использовать JS, то пропустите Шаг 2, а в Шаге 3 пропишите следующие CSS стили:
.news-img{ width:250px; height:100px; } .cell-news:nth-child(even) .news-img {float:left; margin: 0 25px 10px 0;} .cell-news:nth-child(odd) .news-img {float:right; margin: 0 0 10px 25px;}
|
|
