有一个带元素的方块,我需要使其具有适应性。问题出在前挡块(灰色方块)上。创建响应能力有哪些选择?
具有很多元素的块的HTML代码:
<div class="container">
<div class="best">
<div class="best__item">
<div class="best__container">
<img class="best__photo" src="css/img/best_03.jpg" alt="">
<div class="best__back">
<div class="best__back-subtitle">Daily</div>
<div class="best__back-title">Inspiration</div>
</div>
</div>
<div class="best__number">01</div>
</div>
<div class="best__item">
<div class="best__subtitle">Events <span>02 Jan</span></div>
<div class="best__title">Lorem ipsum welcomes new fashion brand</div>
<div class="best__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam congue libero erat, eget aliquam dolor fermentum at.</div>
<a href="#" class="work__btn">CHECK MORE</a>
<div class="best__sub">
<div class="best__title-sub">Best outfit</div>
<div class="best__text-sub">from our stuff</div>
</div>
</div>
</div>
</div>
具有很多元素的块的CSS代码:
.best {
display: flex;
padding: 80px 0 19.2% 0;
background-color: #fff;
position: relative;
}
.best:after {
content: "";
display: block;
width: 100%;
height: 100%;
background: #E8E8E8;
position: absolute;
top: 0;
left: 100%;
z-index: 1;
}
.best__item {
width: 50%;
position: relative;
}
.best__item:first-child:before {
content: "";
display: block;
width: 100%;
height: 174%;
background: #fff;
position: absolute;
top: -80px;
right: 100%;
z-index: 1;
}
.best__item:last-child {
margin: auto;
padding: 0 179px 0 50px;
}
.best__photo {
display: block;
width: 100%;
height: auto;
}
.best__back {
width: 700px;
height: 530px;
background: #E8E8E8;
position: absolute;
top: 50%;
left: -44%;
z-index: 1;
}
.best__container {
padding: 50% 0 0;
text-align: center;
}
.best__back-subtitle {
font-style: italic;
font-size: 25px;
line-height: 1.24;
color: #b2b2b2;
}
.best__back-title {
font-weight: 700;
font-size: 48px;
line-height: 1.25;
color: #000;
}
.best__number {
display: inline-block;
margin: 0;
font-family: 'Raleway', sans-serif;
font-weight: 700;
font-size: 240px;
line-height: 1.6;
background: linear-gradient(to top,
#E8E8E8 46%, #fff 20%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: absolute;
top: 58%;
right: 5%;
z-index: 1;
}
.best__subtitle {
display: flex;
justify-content: space-between;
margin-bottom: 25px;
font-weight: 700;
font-style: italic;
font-size: 18px;
line-height: 1.7;
color: #5d257c;
}
.best__subtitle span {
color: #b2b2b2;
}
.best__title {
font-family: 'Raleway', sans-serif;
font-weight: 700;
font-size: 30px;
line-height: 1.33;
color: #000;
}
.best__title:after {
content: "";
display: block;
width: 100px;
height: 2px;
margin: 30px 0;
background-color: #000;
}
.best__text {
margin-bottom: 40px;
font-size: 16px;
line-height: 2.25;
color: #b2b2b2;
}
.best__sub {
text-align: center;
position: absolute;
top: 150%;
left: 0;
z-index: 1;
}
.best__title-sub {
font-weight: 700;
font-size: 48px;
line-height: 1.25;
color: #000;
}
.best__text-sub {
font-style: italic;
font-size: 25px;
line-height: 1.24;
color: #b2b2b2;
}
答案 0 :(得分:2)
您可以使用网格布局来代替绝对位置,并使用不同的容器共享一些单元格:
可能的例子:
html {
background: #eee
}
body {
background: #fff;
max-width: 950px;
margin: auto;
min-height: 100vh;
display: grid; /* could be any other container , header, section ... */
grid-template-columns: 1.45fr 1.85fr 1.7fr 1.5fr 1.5fr 2fr;
grid-template-rows: 40px 120px 120px 140px auto;
}
body:after {
content: '';
background: gray;
grid-column: 6;
grid-row: 1 / span 5;
}
section {
grid-row: 5;
grid-column: 1 / span 5;
background: white;
margin-top: 40px;
}
div {
padding: 1em;
display: flex;
flex-direction: column;
justify-content: center;
}
div:nth-child(1) {
grid-row: 2 /span 2;
grid-column: 2 /span 2;
background: url(https://picsum.photos/id/227/400/300) 0 0 / cover;
}
div:nth-child(2) {
grid-row: 2 /span 2;
grid-column: 4 /span 2;
}
div:nth-child(3) {
grid-row: 3 / span 2;
grid-column: 1 / span 2;
background: lightgray;
align-items: center;
}
div:nth-child(4) {
grid-row: 3 / span 2;
grid-column: 3 /span 2;
font-size: 80px;
color: #777a;
padding: 0px 0px 20px 30px;
}
div:nth-child(5) {
grid-row: 4 / span 2;
grid-column: 3 /span 3;
margin-top: 30px;
font-size: 2rem;
}
a {
appearance: button;
margin-right: auto;
padding: 0.25em 1em;
}
<div></div>
<div>
<h2> lorem Ipsum</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<a href="">Link</a>
</div>
<div>Inspiration</div>
<div>01</div>
<div>Bust parboulum</div>
<section>whatever comes next...</section>
关于网格的有用资源
在这里,minmax()
和/或媒体查询可以帮助重新排列布局。