html - 我将如何在 CSS 中实现这种外观？

Question

我正在尝试重新创建这个:

我尝试过使用 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; }

Answer 1

我建议仅使用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>