我正在尝试做一个简单的网站，其设计很棒，但令我困惑。这个 codepen 总结了我正在尝试做的事情。我需要编写一个位于普通 1200px 容器顶部的英雄横幅。左侧需要一个 400px 宽的容器，与其下方的 400px 容器平行。红色容器需要与下面的紫色容器对齐，但右侧需要拉伸到末端。对我来说，最困难的事情是它需要响应。我已经尝试了我能想到的所有 Flex 版本，但都没有结果。如何才能实现这一目标？我只需要使用 CSS 和 HTML 来完成此操作，不需要 JavaScript。代码笔链接是https://codepen.io/hundredbillion/pen/jOPRdgr我的代码如下 <div class="text-image-banner"> <div class="text-flex"> <div class="text-content"> <h5>This needs to be 400px wide and the right and left edges must match the right and left edges of the orange bar below for all screen widths</h5> </div> </div> <div class="img-flex"> <div class="img"> <p>This needs to stretch all the way to the right, but the left edge of the red bar must match the left edge of the purple bar for all screen widths. An image will go here</p> </div> </div> </div> <div class="container"> <p class="center">this is a 1200px container</p> <div class="flex"> <p class="four">text container</p> <p class="eight">img container</p> </div> </div>和我的CSS .text-image-banner { display: flex; margin-left:auto; margin-right:auto; } .text-flex { background: blue; display:flex; justify-content:flex-end; flex: 1; } .text-content{ background: yellow; display:flex; width:400px; } .img-flex{ background: red; flex-basis: 1030px; } /*---- this is a plain vanilla hero banner ----*/ .container{ max-width:1200px; margin-left:auto; margin-right:auto; background:pink; } .four{ background:orange; text-align:center; width:400px; height:200px; } .eight{ background:purple; text-align:center; color:white; width:800px; } .flex{ display:flex; } .center{ text-align:center; }
2 回答
人到中年有点甜
TA贡献1895条经验 获得超7个赞
所以事实证明，使用 css grid-template-areas 可以让我得到我想要的东西。这是一种可能的解决方案。愿它能帮助其他遇到同样问题的人。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
*{
overflow: hidden;
}
.container {
display: grid;
grid-template-columns: auto 400px 800px auto;
grid-template-areas: ". header-text header-image header-image"
". body-text body-image. ";
background-color: #2B3D41;
}
.header-text {
grid-area: header-text;
background-color: #F9B9F2;
}
.header-image {
grid-area: header-image;
background-color: #BCA0BC;
}
.body-text {
grid-area: body-text;
background-color: #4C5F6B;
}
.body-image {
grid-area: body-image;
background-color: #83A0A0;
}
@media screen and (max-width: 1200px) {
.container {
grid-template-columns: 33.3% 66.6%;
grid-template-areas: "header-text header-image"
"body-text body-image";
}
}
@media screen and (max-width: 768px) {
.container {
display: block;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header-text">
<h5>This needs to be 400px wide and the right and left edges must match the right and left edges of the orange div
below for all screen widths. </h5>
</div>
<div class="header-image">
<p>This needs to stretch all.An image will go here</p>
</div>
<p class="body-text">text container</p>
<p class="body-image">img container</p>
</div>
</body>
</html>
江户川乱折腾
TA贡献1851条经验 获得超5个赞
我建议你使用 css grid 来代替纯 Flex。我将提供一个例子
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: 400px 1fr;
grid-template-rows: auto;
background-color: #fff;
color: #444;
}
.eight {
background: purple;
text-align: center;
color: white;
width: 800px;
}
.footer {
grid-column: span 2;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 10px;
font-size: 150%;
}
.header,
.footer {
background-color: #999;
}
<div class="wrapper">
<div class="box sidebar">left</div>
<div class="box sidebar">right</div>
<div class="text-container">Content
<br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac porta sapien. Maecenas lacus erat, suscipit bibendum bibendum ut, scelerisque vehicula nisl. Integer eget lorem non ex laoreet pellentesque. Aenean pulvinar rhoncus fermentum.
Nunc sit amet suscipit nibh. Pellentesque ullamcorper neque eget dui iaculis lobortis quis nec diam. Nulla in bibendum enim. Ut elementum nunc risus, bibendum semper turpis ornare eget. In et vulputate mauris. Cras eu velit et ipsum tempor congue
at sit amet odio. Aenean at urna vitae urna rutrum pretium eu id odio. Curabitur suscipit libero in lobortis finibus. Proin libero nunc, venenatis ultricies dapibus ac, accumsan quis lacus. Pellentesque eleifend velit ac finibus tristique. Praesent
dapibus, erat dignissim cursus aliquam, dui velit auctor turpis, sed maximus est nisl in eros. Sed et eros in nibh vulputate imperdiet. Phasellus dignissim feugiat odio, et volutpat ante vestibulum non. Cras venenatis urna quis felis lacinia imperdiet.
Quisque convallis lacus at nulla mollis, quis porttitor arcu scelerisque. Proin neque arcu, rutrum mollis egestas vel, malesuada vitae massa. Cras fringilla, quam ut suscipit lacinia, dolor tortor porta urna, id accumsan dolor dui vel ligula. Donec
sollicitudin consequat dapibus. Nulla eget fringilla leo. Curabitur a lacus id odio varius mollis eu eget risus. Aliquam mauris mi, pulvinar ut justo ut, accumsan euismod augue. Quisque non faucibus arcu. Proin neque ante, aliquet nec mi vel, fringilla
cursus nisi. Sed egestas sollicitudin ligula, vel auctor metus dictum vitae. Vivamus eget nisl malesuada, egestas neque placerat, vestibulum nisi. Curabitur aliquam metus sit amet velit vestibulum posuere. Suspendisse augue eros, pulvinar quis ante
vitae, ultrices placerat dui. Aenean vehicula accumsan arcu id dapibus. Phasellus fermentum massa euismod auctor tristique. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam orci ligula, suscipit a mi in,
blandit sodales purus. Vivamus a feugiat leo. Cras eu tellus laoreet, luctus erat sit amet, convallis tellus. Vivamus scelerisque purus at nisl convallis pharetra. Nam consectetur, nisl quis interdum porttitor, magna ipsum facilisis quam, ut euismod
ligula dui sit amet nulla. Donec massa eros, iaculis sed dui pellentesque, fermentum malesuada nulla. In consequat eu ipsum non convallis. Morbi dapibus accumsan risus eu efficitur. Vivamus dolor velit, congue eget felis nec, mollis tincidunt quam.
Curabitur placerat vestibulum nisl non malesuada. Cras justo purus, molestie pulvinar convallis sed, aliquam at velit. Quisque laoreet semper feugiat. Maecenas varius ut lorem ac feugiat. Nullam interdum metus eu blandit venenatis. Nam condimentum
pretium ex, a sagittis eros pellentesque vitae. Quisque aliquet euismod orci sed egestas. Nullam porta, lacus vel venenatis feugiat, lectus lectus luctus urna, nec ultrices elit felis in augue. Donec non nisi imperdiet, efficitur nibh quis, imperdiet
elit. Sed quis fringilla mauris. Proin at enim tempor, posuere quam a, pulvinar justo. Aliquam in mi enim.</div>
<div class="eight">img container</div>
<div class="box footer">Full width footer</div>
</div>
- 2 回答
- 0 关注
- 79 浏览
添加回答
举报
0/150
提交
取消