Jump to content
  • 0

Вертикальное выравнивание 5 ти блоков в ряд, один из которых резиновый


bigperson
 Share

Question

Все привет. прошу помощи. Есть 5 блоков, нужно правильно прописать стили


<div class="product">
<span class="img">фикс блок по левому краю</span>
<span class="name">фикс блок по левому краю</span>
<span class="descr">Резиновый блок</span>
<span class="summ">фикс блок по правому краю</span>
<span class="summ_price">фикс блок по правому краю, содержимое прижато вправо</span>
</div>

Все блоки должны быть выровнены вертикально по центру

Блок descr должен быть резиновый, остальные фиксированные, содержимое блока summ_price должно быть выровнено по правому краю

Прошу помощи правильно прописать стили


.product span{
display:inline-block;
border:#000000 solid 1px;
vertical-align:middle;

}
.product .img{
width:100px;
}
.product .name{
width:100px;
}
.product .descr{
width:auto;
}
.product .summ{
width:100px;
}
.product .summ_price{
width:100px;
text-align:right;
float:right;
}

Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Antoshka007
      Help!

      Уверен, что для большинства задача до ужаса тривиальная, но у меня чего-то не выходит ее решить.
      Вопрос простой: как выровнять блок по вертикали.
      Вот такой пример: https://jsfiddle.net/742cx8wj/1/
      Нужно, чтобы RIGHT было посередине.

      Спасибо!
    • By Arthur
      Доброго времени суток!
      Есть такой код.
      Не очень шарю в свойстве vertical-align, а мне нужно выровнять разделители между надписями по центру(разделители добавлял через a:after в content: "|")
    • By Максим Саенко
      Ребята! Вот как я не лазил по сайтам, посвященным html/css — никак мне нормально рассказать не могут (или это у меня руки кривые). Короче есть код:


      #menu {
      width: 600px;
      height: 30px;
      margin: 0px auto;
      }
      #menu ul {
      margin: 0px;
      padding: 0px;
      list-style: none;
      }
      #menu li {
      display: inline;
      }
      #menu a {
      display: block;
      float: left;
      width: 150px;
      padding: 5px 0px;
      text-align: center;
      text-decoration: none;
      font-weight: bold;
      background: #EEEEEE;
      }
      #menu a:hover {
      background: #CCCCCC;
      }

      происходит нормальное выравнивание по вертикали по центру! Вот как тут: http://template.ho.ua/norm/
      Делаю ТОЧНО по аналогии, но только мне DIV-ы пошире нужны, да и повыше (не хочу чужой код лопатить) И У МЕНЯ, блин пасхальный, текст выравнивается по вертикали СВЕРХУ (тут вырезается цензурой)!!! http://template.ho.ua/my/ ЧТО Я (тут вырезается цензурой), блин дырявый, не так делаю!? Может кто подскажет такие вещи:
      как, используя в div-e height выровнять по вертикали по центру!?
      чему будет равна высота такого div-а и как ее вычислить:


      div.test {
      font-family:verdana;
      paddind-top:10px;
      paddind-bottom:10px;
      font-size:11px;
      }

    • By EDIsaev
      Доброго времени суток!
      Сталкнулся с проблемой выравнивания inline элементов по вертикали
      пример _http://jsfiddle.net/n4eWe/6/, в данном случае работает, как хотелось бы(визуально)
      но хочется уйти от подгонки размеров вручную, а чтобы оно всё же позиционировалось само, не зависимо от


      #topmenu{
      height: 40px;
      ...
      }

      Работает в таком варианте, как есть, но приходится подгонять при смене высоты topmenu значинием

      #topmenu ul { padding-top: 20px; }
      или topmenu ul убераем вообще и раскомментируем


      #topmenu li {
      /*vertical-align: bottom;*/
      /*line-height: 56px;*/
      ...
      }

      тогда приходится играть значением 56px...
      1. Как же всё таки правильно пользоватся выравниванием?
      2. полупрозрачность нижнего бокса делал сначала с помощью

      opacity:0.6;
      filter:alpha(opacity=60); /* For IE8 and earlier */
      Результат мне нравился(визуально), но!
      На медленных компьютерах ужасное листание при использовании хоть где-то прозрачности, потому сделал подложку из 1px png нужной прозрачности, стало работать быстро и гладко, но можно ли добиться теперь прозрачности scrollbar(как при opacity)?
    • By dmitriydrachov
      Собственно все мы знаем как выровнять по вертикале одно строчный текст с помощью line-height: высота блока родителя. Но если высота измениться то надо и меня line-height, оговорюсь сразу: мною движет лень. Я В общем стараюсь придерживаться принципа если можно сделать с помощью html+css то делаем так(В общем с внедрением css3 и html5 прибегать к отказу от js стал чаще).Так вот вопрос что было бы лучше использовать в этом случае http://jsfiddle.net/F89Cd/ .
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy