Доброго времени суток! Столкнулся с такой задачей: есть вид материало в 2 колонки адаптивный. Первая строка материалов не выравнивается по одной линии, тогда как предыдущие нормально, как надо. Как исправить?
<div class="dertukiman"> <div class="reconaisatge-tab"> <div class="reconaisatge-img"> <span class="danernugat-date" title="Дата добавления">$DATE$</span> <a href="$ENTRY_URL$"><img src="$IMG_URL1$" title="Перейти к материалу $TITLE$" alt="$TITLE$"></a> </div> <div class="reconaisatge-right"> <h2 class="reconaisatge-title"><p class="materialist"><a href="$ENTRY_URL$">$TITLE$</a></p></h2> <div class="reconaisatge-det"> <span><i class="fa fa-eye"></i>$READS$</span> <span><i class="fa fa-download"></i>$LOADS$</span> <span><a href="$COMMENTS_URL$"><i class="fa fa-comments"></i>$COMMENTS_NUM$</a></span> <span><a href="$CATEGORY_URL$"><i class="fa fa-folder"></i>$CATEGORY_NAME$</a></span> </div> </div> </div> </div>
.dertukiman{ width: 48%; float:left; margin: 1px 0px 1px 9px; } .reconaisatge-tab{ display:block; width:100%; margin-bottom: 12px; background: rgba(247, 243, 243, 0.99); border: 1px solid rgba(204, 194, 194, 0.98); border-radius: 6px 6px 3px 3px; box-shadow: 0px 2px 7px 0px rgba(148, 148, 148, 0.39), 0px 3px 18px 0px rgba(12, 12, 12, 0.09); } .reconaisatge-img, .reconaisatge-right{ display:block; vertical-align:top; } .reconaisatge-right{ padding: 12px; } .reconaisatge-img{ width:100%; position:relative; } .reconaisatge-img img{ width:100%; vertical-align:bottom; height: 213px; border-bottom: 1px solid rgba(170, 172, 175, 0.98); } .reconaisatge-det{ margin-top:10px; color:rgba(128, 128, 128, 0.98); font-size:13px; padding: 0px 0px 10px 2px; } .reconaisatge-det span{ margin-right:8px} .reconaisatge-det i{ margin-right:8px} .reconaisatge-det a{ color:rgba(128, 128, 128, 0.97); text-decoration:none} .reconaisatge-det a:hover{ color:rgb(17, 114, 152); text-decoration:none} .reconaisatge-title{ font-size:18px; padding-right:5%; margin:0px; border-bottom: 1px solid rgba(216, 220, 224, 0.98); padding: 0px 0px 9px 5px; } .reconaisatge-title a{ color: rgb(17, 114, 152); font-size: 18px; overflow:hidden; font-family: PT Sans; text-decoration:none; font-weight: bold; } .reconaisatge-title a:hover{ color: #18171c; } .danernugat-date{ display:inline-block; position:absolute; top: 5px; left: 5px; color:#fff; text-align:center; padding: 7px 10px; font-size: 15px; line-height: 17px; background: rgba(0, 0, 0, 0.28); border-radius: 5px; text-shadow: 0 1px 0 #423e3e; } .danernugat-date span{ display:block; font-size: 12px; text-transform:lowercase; line-height:13px; margin-top:3px; } .reconaisatge-tab:hover .danernugat-date{ background: rgba(14, 14, 14, 0.31); } .reconaisatge-tab img, .h-content-top img{ border-top-left-radius: 5px; border-top-right-radius: 5px; } .materialist{ white-space: nowrap; overflow: hidden; padding: 3px; background: rgba(244, 240, 240, 0); position: relative; margin: -5px 3px -3px -9px; } @media screen and (max-width: 500px){ .reconaisatge-det{ display: none!important; } @media screen and (max-width: 780px){ .dertukiman{ width: 100%; margin: 0px 10px 10px -3px; }
Установлен стандартный шабон 1708
Контент-модули
Продвижение сайта
Управление сайтом