Фундамент ЗУРБ и обрушение ряда

я разместил вопрос на форуме ZURB, но я заметил, что ни на один пост не было ответов. Поскольку я думаю, что эта проблема может возникнуть у многих других, я думаю, что было бы неплохо поместить ее и на SO. Вот оно:

я создал минимальный пример проблемы, используя следующую разметку (отредактировано с советами CLCS):

<body>
    <div class="row collapse test">
      <div class="large-4 columns">
          <p>Test 1</p>
        </div>
        <div class="large-4 columns">
          <p>Test 2</p>
        </div>
        <div class="large-4 columns">
          <p>Test 3</p>
        </div>
      </div>
</body>

Все классы CSS являются нетронутыми классами ZURB Foundation. Единственное дополнение для класса тестовой таблицы, единственной целью которого является только визуальная помощь по проблеме (также отредактировано для ясности):

.test div {
  border: 1px solid red;
}

Ожидаемый результат будет состоять из 3 столбцов, идеально соприкасающихся друг с другом. Фактический вывод представляет собой два столбца, соприкасающиеся друг с другом, как и ожидалось, но третий столбец немного смещен вправо, оставляя пробел между центром и правым столбцом (см. Прикрепленное изображение, также отредактированное, но проблема все еще присутствует).

[EDIT] Похоже, что некоторые другие пользователи сталкиваются с той же проблемой в той же среде (Safari 7, Zurb Rails Gem 5.0.2.0)[/EDIT]

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


collapse multiple-columns grid-system zurb-foundation space
person Doodloo    schedule 07.01.2014    source источник
comment
Стандартно ли назначать big-4 тегу ‹p›? Я думал, что они должны применяться только к div ??   -  person vtacreative    schedule 08.01.2014
comment
Танки CLCS. Обычно я этого не делаю, я просто подумал, когда писал пример, что он показывает правильную проблему. Я отредактировал свой вопрос, чтобы отразить ваше предложение, но он показывает ту же проблему (см. Новый фрагмент и новый снимок экрана). По словам некоторых других пользователей, следящих за этой веткой: foundation.zurb.com/forum/posts/1311 это будет проблема Safari. Есть идеи?   -  person Doodloo    schedule 08.01.2014

Ответы (5)


arrow_upward
1
arrow_downward

Похоже, проблема округления связана с тем, как Safari преобразует ширину столбцов в процентах, ширина сайта по умолчанию заканчивается (по крайней мере, на моей машине) шириной 1000 пикселей. Сравнивая результаты расчетов между Chrome и Safari, я получаю 333,328 пикселей в Chrome и 333 пикселя в Safari.

В зависимости от остальных требований к макету обходной путь может состоять в том, чтобы настроить ширину макета на фигуру, которая лучше работает с требуемыми столбцами.

person George    schedule 09.01.2014
comment
Джордж, спасибо. Прямо сейчас я не могу проверить это, потому что раскомментирование значений по умолчанию из основы переопределяет файл scss, изменяет его поведение, что означает, что закомментированные значения не являются значениями по умолчанию. Если кто-нибудь сможет протестировать решение Джорджа и сообщить об этом, я буду рад выбрать его решение как правильное. - person Doodloo; 17.01.2014

arrow_upward
3
arrow_downward

Это сочетание проблемы округления, на которую указывали другие выше, и того факта, что Foundation поместил float: right; в последний столбец строки. Вот почему вы видите разрыв между последним столбцом и средним столбцом.

Чтобы убрать пробел, вы можете добавить класс end в каждый столбец.

Ознакомьтесь с документацией Foundation в разделе «Неполные строки» http://foundation.zurb.com/docs/components/grid.html#incomplete-rows

person bert_teng    schedule 24.03.2014

arrow_upward
3
arrow_downward

Проблема с округлением Safari. Существует разница между width: 33.333% и width: 33.333333% для больших-4 в Safari. Чтобы решить эту проблему, используйте sass для компиляции собственного css на основе файлов sass и повышения точности.

Поместите Sass::Script::Number.precision = 6 в config.rb или в Gruntfile.coffee

   sass:
        options:
            loadPath: ["bower_components/foundation/scss"]
            sourcemap: "true"
            precision: 6

        dist:
            files:
                "css/app.css": "scss/app.scss"
person rodpl    schedule 05.05.2014
comment
Это решило мою проблему и было единственным местом, где я нашел, что кто-то упомянул об этом. Спасибо!!! - person EL45; 14.05.2014

arrow_upward
0
arrow_downward

Я исправляю это, добавляя класс css в последний столбец, css для этого класса

.your_class_for_last_column { float: left !important;} 
/* to fix 1px Foundation 5 bug*/
person xsor    schedule 06.06.2014

arrow_upward
0
arrow_downward

Добавление границы в 1px сработало для меня. Вы можете попробовать что-то вроде этого:

<div class="small-5 small-offset-2 columns border">
     ...        
</div>
<div class="small-5 columns border">
    ...
</div>

В CSS: .border {border-right: 1px сплошной цвет столбца;}

person Diego Castillo    schedule 03.07.2014