gpt4 book ai didi

css - 使用 CSS Flexbox 构建堆叠布局

转载 作者:行者123 更新时间:2023-11-28 00:53:30 24 4
gpt4 key购买 nike

我有一个工作面试的技术测试,我正在为应该是一个简单的布局而苦苦挣扎!

我需要一个两列的设计,其中 div 按以下方式堆叠在彼此之上:

desired Layout

对于较小的屏幕,它将更改为:

enter image description here

我以为我很了解 flexbox,但事实证明我显然不知道,我能得到的最接近的(离...很近)是

enter image description here

使用

 <head>
<style>
.container{
width:600px;
min-height:300px;
background-color: blue;
display:flex;
flex-wrap: wrap;
}
.small{
width: 100px;
height:100px;
background-color: darkgoldenrod;
margin:20px;
}
.big{
width: 250px;
height:250px;
background-color: green;
margin:20px;
}
</style>
</head>
<body>
<div class="container">
<div class="big">Widget 1</div>
<div class="small">Widget 2</div>
<div class="small">Widget 3</div>
<div class="big">Widget 4</div>
<div class="small">Widget 5</div>
<div class="small">Widget </div>
</div>
</body>

我已经搜索了几个小时,但我找不到任何接近的东西!谁能指出我正确的方向?

最佳答案

你可以只使用 float , float 较大的 .widget左边和较小的元素 .widgets .container 右侧的元素大屏幕上的元素:

/*IGNORE STYLE RULES BETWEEN HERE...*/

body {
margin: 0;
}

.container {
background: blue;
box-sizing: border-box;
counter-reset: widget;
margin: auto;
max-width: 600px;
padding: 20px;
}

.widget::after {
color: white;
content: "widget-" counter(widget);
counter-increment: widget;
font-family: monospace;
}


/*...AND HERE*/

.container {
overflow: auto;
/*Stops container height from collapsing*/
}

.widget {
box-sizing: border-box;
padding: 20px;
margin-bottom: 20px;
max-width: 250px;
}

.widget--small {
background: orange;
height: 100px;
}

@media screen and (min-width: 390px) {
.widget--small {
float: right;
clear: right;
width: 100px;
}
.widget--small:nth-child(5) {
margin-top: -30px;
/*offsets the extra spacing between elements*/
}
}

.widget--big {
background: green;
height: 250px;
width: 250px;
}

@media screen and (min-width: 390px) {
.widget--big {
float: left;
clear: left;
}
}
<div class="container">
<div class="widget widget--big"></div>
<div class="widget widget--small"></div>
<div class="widget widget--small "></div>
<div class="widget widget--big"></div>
<div class="widget widget--small"></div>
<div class="widget widget--small"></div>
</div>

关于css - 使用 CSS Flexbox 构建堆叠布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53100085/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com