Равная высота смежных блоков с жидкостной решеткой и фиксированными желобами

Question

Я видел несколько вопросов и ответов здесь о жидкостных решетках с фиксированными желобами. Я также много видел о равных по высоте столбцах div. Я пытаюсь сделать и то и другое одновременно и не нашел конкретного решения.

Я смог заставить его работать, но мое решение кажется немного "хакерским" и нестабильным. Ниже моя разметка со ссылкой jsFiddle. Является ли это безопасным способом выполнения делений ширины жидкости одинаковой высоты с фиксированными желобами, или вы рекомендуете лучшее решение? В последнее время я пытаюсь улучшить свою семантику и писать надежный код...

** Для поддержки браузера требуется только IE9 +

jsFiddle

HTML

<div class="grid">
    <div class="grid_01">
        <h2>Change Password</h2>
        <p>Individual locations may only update their own password. The master location may update all passwords.</p>
        <p>If you have any questions, please contact the us at 555-555-5555.</p>
    </div>
    <div class="gutter"></div>
    <div class="grid_01">
        <h2>New Password</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.</p>
    </div>
</div>

CSS

.grid {display:table; padding:20px;}
.grid_01 {
    display:table-cell;
    width:50%;
    padding:20px;
    border-top:4px solid #a085c6;
    background:#ffffff;
    -moz-box-shadow:0px 1px 1px 0px #717171;
    -webkit-box-shadow:0px 1px 1px 0px #717171;
    box-shadow:0px 1px 1px 0px #717171;
}
.gutter {width:20px;}
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Мое самое большое беспокойство - это пустое деление. Я ценю любые конструктивные отзывы.

Answer 1

Вы можете сделать это с flexbox. Установите элементы сетки, чтобы иметь margin-right: 20px (или что бы вы ни хотели, чтобы ваш желоб был), затем установите для элемента сетки последнего ребенка значение right-right 0.

Смотрите скрипку: http://jsfiddle.net/xLR3x/

Answer 2

Улучшая ответ jbenjohnson, я потратил некоторое время, пытаясь достичь того же результата, и (я думаю) мне удалось что-то хорошее. Я использую отрицательные поля в контейнере div, чтобы выровнять контент с вашим общим макетом, а также некоторые полуторные поля желоба внутри, чтобы все были равномерно распределены.

Здесь улучшение по сравнению с ответом jbenjohnson заключается в том, что даже на сетках, использующих flex-flow: wrapполя не разбиваются с правой стороны (что крайне важно для адаптивных макетов).

Давайте очистим HTML-код OP, чтобы избавиться от надоедливых div-элементов:

<div class="grid">
    <div class="grid-cell">
        <h2>Change Password</h2>
        <p>Individual locations may only update their own password. The master location may update all passwords.</p>
        <p>If you have any questions, please contact the us at 555-555-5555.</p>
    </div>
    <div class="grid-cell">
        <h2>New Password</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.</p>
    </div>
</div>

Теперь давайте применим некоторые флексбокс-любящие...

Я использую водосточный желоб 20px, как OP, поэтому мои поля составляют 10px и -10px.

.grid {
    display: flex;
    margin-left: -10px;
    margin-right: -10px;
    padding-left: 10px; // Optional, see NOTE 3
    padding-right: 10px;
}
.grid-cell {
    width: 50%; // that's not usually recommended, flex-basis is better.
    margin-left: 10px;
    margin-right: 10px;
}

JS Fiddle

ПРИМЕЧАНИЕ 1. - Это не хак. W3C четко определяет использование отрицательных полей именно для этих случаев. Это, пожалуй, самый "послушный" ответ на вопрос ОП.

ПРИМЕЧАНИЕ 2. - Я также рекомендую избавиться от width свойства и обменять их flex-basis ценности. Они намного более надежны и предсказуемы в контексте flexbox. См. Справочник по flex-основе в превосходном Руководстве по FlexBox Криса Койера.

ПРИМЕЧАНИЕ 3. - Без горизонтальных отступов сетка будет выравниваться по крайним сторонам вашего макета (что здорово, особенно с макетами фиксированной ширины). Я сохранил их, чтобы скопировать макет OP.

Answer 3

Вы можете использовать: border-spacin:20px; если это соответствует вашим потребностям.

Иначе, Вы можете добавить пустой элемент ячейки таблицы через :beforeкроме :first-child,

.grid >div:before {
content:'';
display:table-cell;
width:20px;
}
.grid >div:first-child:before {
display:none;
}

или же

.grid >div:not(:first-child):before {
content:'';
display:table-cell;
width:20px;
}