Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 11.05.2017, 19:01   #1
frolov1028
Новичок
Джуниор
 
Регистрация: 11.05.2017
Сообщений: 1
По умолчанию Выровнять вид материалов

Здравствуйте друзья. Помогите пожалуйста выровнять вид материалов. Все куда то едит и криво отображает. Вот скрины проблем




Вот css

Код:
.items {
  margin-bottom: 10px;
}
.items:after {
    display: table;
    content: "";
    line-height: 0;
    clear: both;
}
.items .item {
  float:  left;
  width: 19.3%;
  background: #0065b5;
  padding: 10px;
  box-sizing: border-box;
  margin: 0 7px 7px 0;
}
.items .item:hover {
  background: #0a7fdb;
}
.items-2 .item {
  width: 49.3%;
}
.items-3 .item {
  width: 32.61%;
}
.items-4 .item {
  width: 24.3%;
}
.items-5 .item {
  width: 19.3%;
}

.item h3 {
    color: #ffea00;
    text-align: center;
    margin-bottom: 0;
}
.item-parameters {
    color: #fff;
}
.item-parameters li {
  margin-bottom: 10px;
  text-align: center;
  min-height: 4em;
}
.items:hover .item a {

}
.item-img {

}
.item-title {
  min-height: 3em !important;
  overflow: hidden;
}
.item-price strong {
    font-size: 1.5em;
    color: #ffea00;
}
.item-button {
  padding-top: 10px;
}
.button{text-decoration:none; text-align:center; 
 padding:11px 32px; 
 border:solid 1px #004F72; 
 -webkit-border-radius:4px;
 -moz-border-radius:4px; 
 border-radius: 4px; 
 font:18px Arial, Helvetica, sans-serif; 
 font-weight:bold; 
 color:#E5FFFF; 
 background-color:#3BA4C7; 
 background-image: -moz-linear-gradient(top, #3BA4C7 0%, #1982A5 100%); 
 background-image: -webkit-linear-gradient(top, #3BA4C7 0%, #1982A5 100%); 
 background-image: -o-linear-gradient(top, #3BA4C7 0%, #1982A5 100%); 
 background-image: -ms-linear-gradient(top, #3BA4C7 0% ,#1982A5 100%); 
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1982A5', endColorstr='#1982A5',GradientType=0 ); 
 background-image: linear-gradient(top, #3BA4C7 0% ,#1982A5 100%);   
 -webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
 -moz-box-shadow: 0px 0px 2px #bababa,  inset 0px 0px 1px #ffffff;  
 box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
  }
  .button:hover{
    text-decoration:none;
 padding:11px 32px; 
 border:solid 1px #004F72; 
 -webkit-border-radius:4px;
 -moz-border-radius:4px; 
 border-radius: 4px; 
 font:18px Arial, Helvetica, sans-serif; 
 font-weight:bold; 
 color:#E5FFFF; 
 background-color:#1897c2; 
 background-image: -moz-linear-gradient(top, #1897c2 0%, #025c7a 100%); 
 background-image: -webkit-linear-gradient(top, #1897c2 0%, #025c7a 100%); 
 background-image: -o-linear-gradient(top, #1897c2 0%, #025c7a 100%); 
 background-image: -ms-linear-gradient(top, #1897c2 0% ,#025c7a 100%); 
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#025c7a', endColorstr='#025c7a',GradientType=0 ); 
 background-image: linear-gradient(top, #1897c2 0% ,#025c7a 100%);   
 -webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
 -moz-box-shadow: 0px 0px 2px #bababa,  inset 0px 0px 1px #ffffff;  
 box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
 }
 .button:focus{
      text-decoration:none;
 }
Вот как задумовалось



Заранее благодарю. Или как решить эту проблему. Подскажите пожалуйста.

Последний раз редактировалось frolov1028; 11.05.2017 в 19:04.
frolov1028 вне форума Ответить с цитированием
Старый 13.05.2017, 09:08   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

юзай flex, он растягивает элементы по высоте в строке
Alar, верни репу!
Naive вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Видео презентация материалов в интернете Н.В.Миляев Свободное общение 3 23.04.2017 12:40
Сортировка материалов в Joomla 3 Bilargo WordPress и другие CMS 1 11.09.2016 16:22
Список просмотренных Материалов maximus825 PHP 7 28.02.2013 18:40
Вид материалов поиска Yura111 HTML и CSS 0 05.05.2012 22:36
скрипт оценки материалов kspasha PHP 16 24.09.2010 12:47