2

Добрый день! Есть код html.

<div class="product">
        <img src="images/product/<?echo $item['img']?>" width="190px" alt="<?echo $item['title']?>"/>
        <hr/>
      <div class="head"><?echo $item['title']?></div>
        <form>
                <div class="label">Оптическая сила, D:</div>
          <select class="sel">
                    <option>-10,00</option>
                    <option>-19,00</option>
                    <option>-20,00</option>
              </select>
                <div class="label">Радиус кривизны, мм:</div>
          <select class="sel">
                    <option>-10,00</option>
                    <option>-19,00</option>
                    <option>-20,00</option>
              </select>
            <div class="basket">
            <?echo $item['price']?> тг.
              <button>Добавить<span></span></button>
            </div>
        </form>
    </div>

Есть CSS

/product/

    section.wrapper .product {display:inline-block; width:212px; height:381px; border:1px solid #eaeaea; background:#fff; padding:36px 9px 22px 9px;
    text-align:center; margin:0 16px 20px 0; position:relative;}
    section.wrapper .product hr {border:none; background:#dcdcdc; height:1px; margin:15px 0 10px 0;}
    section.wrapper .product .head {padding:0 20px; line-height:15px;}
    section.wrapper .product form {margin:15px 0; padding:0;}
    section.wrapper .product form .label {width:130px; display:inline-block; text-align:left; margin:0 0 10px 0;}
ect {width:70px; display:inline-block; border:1px solid #c5c5c5;}
    section.wrapper .product .basket {position:absolute; bottom:22px; left:9px; background:#4d4d4f; height:33px; width:212px; line-height:32px;
    color:#fff;}
    section.wrapper .product.mr {margin:0 0 20px 0;}

Но на сайте показывается немного криво. Где ошибка по CSS? Почему идет верхний отступ по блокам продуктов. Принтскрин. введите описание изображения здесь

Ссылка на сайт http://twoeyes.kz/

2 ответа 2

3

Добавьте следующее свойство:

section.wrapper .product { vertical-align: top; }
0

введите описание изображения здесь

Я применил стили:

 #mainmenu { position:relative; top:-13px !important;}
 #sidebar{ position:relative; top:-13px;}
.slide{ position:relative; top:-14px;}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.