Создание CSS-сетки без плавающих

Question

Как следует из заголовка, мне нужно создать CSS Grid без потери float, так как это может помешать подключаемому модулю Waypoints JS...

Во всяком случае, я наткнулся на display: inline-block; но если поля в сетке занимают 100% ширины контейнера, это работает, только если вы пишете весь код в одну строку ( JSFiddle 1)

Поскольку мой проект является шаблоном, я не могу просто заставить пользователя написать весь его код в одну строку.

Есть ли способ решить эту проблему?

Udate 1:

white-space: nowrap; мне тоже не помогает, потому что он испортил весь текст внутри элемента ( JSFiddle 2)

Обновление 2:

это font-size: 0; Решение не помогает мне, потому что мне также нужен текст в родительском элементе

Answer 1

Обновить:

Рабочий пример на jsFiddle.

Настройка font-size: 0; к родительскому элементу, а затем установка его обратно на нужный размер на содержащем элементе решит проблему. Также обязательно используйте vertical-align: top; на содержащих элементах неравные строки текста будут начинаться с одной и той же позиции сверху.

Примечание: если вам нужно, чтобы два элемента div отображались на одинаковой высоте (из-за цветов фона, изображения и т. Д.), Вам необходимо использовать метод искусственных столбцов.

.left {
    background: red;
    height: 140px;
    width: 55%;
    margin: 0 5% 0 0;
    display: inline-block;
    font-size: 14px;
    vertical-align: top;
}
.right {
    background: orange;
    height: 140px;
    width: 40%;
    display: inline-block;
    font-size: 14px;
    vertical-align: top;
}
section {
    background: black;
    width: 100%;
    margin: 0 0 20px;
    color: #ffffff;
    font-size: 0;
}

Исправьте, если div не содержат текст:

Рабочий пример на jsFiddle.

добавлять white-space: nowrap; к правилу раздела:

section {
    background: black;
    width: 100%;
    margin: 0 0 20px;
    white-space: nowrap;
}

Для получения дополнительной информации о white-space свойство, см.: http://www.quirksmode.org/css/whitespace.html

Answer 2

У CSS Tricks есть отличная статья по удалению лишних пробелов при использовании inline-block

http://css-tricks.com/fighting-the-space-between-inline-block-elements/