Как мне достичь этого вида в CSS?

Я пытаюсь воссоздать это:

Я пробовал использовать flex-box и grid, но пока безуспешно.

Вы найдете мой код CSS ниже, чтобы проиллюстрировать, что я пробовал, но это не самый эффективный способ.

Я с нетерпением жду любых советов или решений, которые вы могли бы мне дать.

.parent {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

.div1 { grid-area: 1 / 2 / 2 / 4; }
.div2 { grid-area: 1 / 4 / 2 / 5; }
.div3 { grid-area: 1 / 5 / 2 / 6; }
.div4 { grid-area: 2 / 2 / 3 / 4; }
.div5 { grid-area: 2 / 4 / 3 / 5; }
.div6 { grid-area: 2 / 5 / 3 / 6; }
.div7 { grid-area: 3 / 2 / 4 / 4; }
.div8 { grid-area: 3 / 4 / 4 / 5; }
.div9 { grid-area: 3 / 5 / 4 / 6; }
.div10 { grid-area: 4 / 2 / 5 / 4; }
.div11 { grid-area: 4 / 4 / 5 / 5; }
.div12 { grid-area: 4 / 5 / 5 / 6; }
.div13 { grid-area: 5 / 2 / 6 / 4; }
.div14 { grid-area: 5 / 4 / 6 / 5; }
.div15 { grid-area: 5 / 5 / 6 / 6; }

html css

23.12.2020 19:18

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

вы можете использовать вручную float как здесь:

<!DOCTYPE html>
<html>
    <head>
        <style>
            .outher{
                float: left;
                width: 100%;
            }
            .inner{
                float: left;
                width: 25%;
                padding: 5px;
                box-sizing: border-box;
                min-width: 180px;
            }
        </style>
    </head>
    <body>
        <div class = "outher">
            <div class = "inner">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et 
            </div>
            <div class = "inner">
                orem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et 
            </div>
            <div class = "inner">
                orem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et 
            </div>
            <div class = "inner">
                orem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et 
            </div>
        </div>
    </body>
</html>

Вы не должны использовать float в современном веб-дизайне, модель гибкого макета заменила его во всех отношениях. Он предоставляет гораздо более гибкие варианты компоновки без некоторых проблем с плавающей запятой.

— 24.12.2020 00:11

flexbox — действительно мощный и хороший способ работы, но в этом примере это не имеет значения.

— 24.12.2020 00:17

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

— 24.12.2020 09:52

23.12.2020 19:27

Ответ принят как подходящий

Я бы рекомендовал использовать grid только для создания всего макета страницы и/или макетов, которые вы не можете сделать с flexbox. Для вашего случая flexbox вполне достаточно, и он лучше поддерживается браузерами.

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

body
{
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.section-header
{
    display: flex;
    align-items: center;
    margin: 2em 0;
}

.section-header > div 
{
    flex-grow: 1;
}

.section-header > h2 
{
    margin: 0 1em;
    font-size: 1.5em;
}

.section-content
{
    display: flex;
}

.section-content__article
{
    width: 25%;
    border-right: thin solid #CCC;
    padding: 0 2em;
  box-sizing: border-box;
}

.section-content__article:first-child
{
    padding-left: 0;
}

.section-content__article:last-child
{
    border-right: none;
    padding-right: 0;
}

.section-content__article--with-image
{
    width: 50%;
    display: flex;
}

.section-content__article h3
{
    margin: 0;
    font-size: 2em;
    line-height: 1em;
}

.section-content__article--with-image > div
{
    width: 50%;
}

.section-content__article--with-image img
{
    max-width: 100%;
    padding-left: 2em;
    box-sizing: border-box;
}

<div class = "section-header">
    <div><hr></div>
    <h2>Lorem Ipsum</h2>
    <div><hr></div>
</div>
<div class = "section-content">
    <div class = "section-content__article section-content__article--with-image">
        <div>
            <h3>Nam liber tempor cum soluta</h3>
            <div>
                <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
            </div>
        </div>
        <div>
            <img src = "http://placeimg.com/640/380/any" />
        </div>
    </div>
    
    <div class = "section-content__article">
        <h3>Duis autem vel eum</h3>
        <div>
            <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper sus cipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
        </div>
    </div>
    
    <div class = "section-content__article">
        <h3>At vero eos et accusam</h3>
        <div>
            <p>Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
        </div>
    </div>
</div>

23.12.2020 23:55

Другие вопросы по теме

Центрирование следующего изображения JS при увеличении размера экрана

Ионный значок в строке таблицы Mat переходит в фиксированный заголовок Mat при прокрутке

Как добавить больше текста в это поле?

Гамбургер-меню с субменту

Создание изображения из svg не работает

CSS: выравнивание HTML по центру формы, но метки и легенда выровнены по левому краю

Пользовательский интерфейс материала: сетка не размещает выбор в строке

Как заставить <v-row> начинаться сверху <v-container> в Vuetify?

Я не могу щелкнуть ссылку в моем неупорядоченном списке

Расположите выдвижную панель под верхней навигацией

Как мне достичь этого вида в CSS?

Ответы 2

Другие вопросы по теме

Похожие вопросы