Jump to content
  • Sign Up
Sign in to follow this  
vasa666

display flex - в Firefox как то не так работает.

Recommended Posts

Есть вот такая конструкция.. http://jsfiddle.net/4376rfy8/3/

 

В IE, Google Chrome и Opera вроде работает, а вот в FireFox текст в левой колонке почему то съезжает вниз, методом тыка выяснил что скорее всего виноват     display: table; в родительском контейнере. Но вот обойти этот глюк пока не могу придумать как((( Может кто сталкивался с подобным!?

 

Что нужно в итоге:

1) левая и правая колонка одинаковой высоты с плавующей шириной

2) в правой колонке 4 блока которые центруются(выравниваются) по вертикали, причем верхний блок должен прилипнуть к потолку, а нижний к полу.

Edited by vasa666

Share this post


Link to post
Share on other sites

Добавьте vertical-align: top вашим «ячейкам» (aside, article). По умолчанию содержимое ячеек выравнивается по базовой линии, в ее расположении браузеры и расходятся (в спецификации этот момент описан довольно запутанно, так что какое поведение правильное — вопрос интересный :)).

 

P.S. От main в качестве общего контейнера и aside у него внутри наворачиваются слёзы (а селекторы по тегам усиливают эффект). Ладно б еще это был по факту мертворожденный section...

Share this post


Link to post
Share on other sites

Добавьте vertical-align: top вашим «ячейкам» (aside, article). По умолчанию содержимое ячеек выравнивается по базовой линии, в ее расположении браузеры и расходятся (в спецификации этот момент описан довольно запутанно), так что какое поведение правильное — вопрос интересный :)

 

P.S. От main в качестве общего контейнера и aside у него внутри наворачиваются слёзы (а селекторы по тегам усиливают эффект). Ладно б еще это был по факту мертворожденный section...

 

Огромное спасибо!) заработало... вы меня спасли!)

А по поводу main и aside.. пытаюсь перейти на HTML5 и css3, 2-й день колупаюсь) не судите строго) Пока еще не доконца въехал в эти новые блоки) наверное вернусь к обычным DIV'ам.

Share this post


Link to post
Share on other sites

Обычные дивы — тоже HTML5, другого HTML сейчас просто нет:). Но от main и aside бывает польза для вспомогательных технологий (экранные читалки для слепых и т.п.)., так что есть смысл выделять main-ом самое главное (основное содержимое страницы), а aside-ом — второстепенное (то, что можно безболезненно пропустить и зачитать лишь по явному запросу пользователя).

Share this post


Link to post
Share on other sites

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
Reply to this topic...

×   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.

Sign in to follow this  

  • Similar Content

    • By de3ok
      Есть контейнер в котором много других контейнеров. Как сделать заполнение друг за другом с переносом в случае если контейнеру не хватает места. (пример на пикче)

      У меня получается либо контейнер занимает все свободное место по горизонтали, либо по вертикали. Но ни как не друг за другом " одной колонкой"

    • By Yurii.Vovchuk
      Привет. Друзья, подскажите пожалуйста, как сверстать вот такую сетку на флексах, чтобы блоки нижнего ряда прилипали к блокам верхнего (типа мозаичная верстка).
      Применил align-items:flex-start, думал что сработает, но нет...

    • By мурамаса
      Добрый день, сверстал страницу с блоком новостей которые идут под меню колонкой, по одному блоку в ширину контейнера. В хроме все нормально и в файрфокс на моем ноутбуке с разрешением 1366х768 тоже, но с другого компа верстка сьезжает именно в firefox. Немного полазил в браузере и блок становится на место если убрать overflow: hidden, но тогда текст соотвественно вылезает за пределы блока. Скинул весь css на всякий случай.
      body { margin: 0; padding: 0; background: url(/img/casfon.jpg); } .frame { width: 1200px; background-color: white; margin: 0 auto; box-sizing: border-box; -moz-box-sizing: border-box; } .box { width: 1100px; margin: 0 auto; box-sizing: border-box; -moz-box-sizing: border-box; } header { background: url(/img/casino.jpg) no-repeat center; height: 300px; } /* БЛОК НОВОСТЕЙ ГЛАВНОЙ СТРАНИЦЫ*/ .news { margin-left: 100px; margin-bottom: 100px; } .news-block { width: 800px; padding: 10px; margin: 0 0 40px 0; height: 310px; overflow: hidden; text-overflow: clip; font-size: 15px; text-align: justify; line-height: 1.3; } .news-block h2 { font-size: 22px; } .news-block h2 a { text-decoration: none; } .news-image { float: left; width: 300px; height: 280px; padding: 10px; } /* СТИЛИ ЦЕНТРАЛЬНОГО МЕНЮ */ .menu { float: left; border-bottom: solid red 2px; width: 100%; margin-bottom: 50px; } .menu li { list-style-type: none; font-size: 25px; float: left; margin: 0px 0 auto 50px; padding: 20px; } .menu li a { text-decoration: none; } .menu li:hover { background-color: red; } /* СТАТЬЯ КОНТЕНТ ОСНОВНОЙ */ .title { text-align: center; font-size: 25px; } .content { font-size: 18px; text-align: justify; float: left; margin: 30px auto 50px auto; } .content p { overflow: hidden; } .image { width: 330px; height: 300px; margin: 0 auto 20px 20px; clear: both; } .icon { width: 25px; height: 25px; float: left; margin-right: 25px; } /* СТИЛИ ДЛЯ ФОРАМТИРОВАНИЯ ТЕКСТА */ .red { color: red; } /* ПОДВАЛ */ footer { font-size: 13px; text-align: center; padding-top: 40px; display: block; height: 30px; margin-top: -60px; clear: both; border-top: 2px solid red; }  


  • Member Statistics

    46,837
    Total Members
    1,451
    Most Online
    HARDSOFT
    Newest Member
    HARDSOFT
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...