User 13204940 Ответов: 1

Простая компоновка таблицы CSS не работает должным образом

Привет,

Я пытаюсь добиться следующей настройки:

| div fit to content |margin 48px| ----- s t r e t c h e d ----- |

Таким образом, левому div требуется margin: 0 48px 0 0, и он должен соответствовать своему содержимому, а правый div должен растягиваться горизонтально, чтобы соответствовать оставшейся ширине родительского элемента.

Я пробовал установить родителя на
дисплей: таблица;
ширина: 100%;

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

Следует отметить одну вещь: левый и правый div должны заполнять высоту родительского элемента.

| div fit to content |           | ----- s t r e t c h e d ----- |
|                    |margin 48px|                               |
| -- more content -- |           | -- stretched down to here  -- |


Было бы здорово, чтобы этот простой макет работал.

Что я уже пробовал:

Все, о чем идет речь.
---------------------------------

1 Ответов

Рейтинг:
1

Richard Deeming

Если вы можете отказаться от поддержки IE10 и более ранних версий, Flexbox будет простым решением:

<div class="wrapper">
    <div>
        Div fit to content<br />
        More content<br />
        And some more
    </div>
    <div>
        Stretched
    </div>
</div>
.wrapper
{
    display: flex;
}
.wrapper > div
{
    flex-grow: 1;
}
.wrapper > div:first-child
{
    margin-right: 48px;
    flex-grow: 0;
}
Демонстрация[^]
Поддержка браузеров[^]
Полное руководство по Flexbox | CSS-Tricks[^]