问题描述
我正在努力实现这种效果;
I am struggling to achieve this efect ;
如果屏幕足够大,我想将n-div彼此相邻放置,否则将其放置在另一个下方,我希望这些n-div能够包含在一个div中(我的代码中的黄色容器)和标题区域(我的代码中的黑色)+封装了所有内容的包装器中的黄色容器(我的代码中的绿色)
I would like to put n-divs next to each others if the screen is big enough , and one below each other otherwise , and I would like those n-divs to be contained in one div ( the yellow container in my code ) and the title area (black in my code) + the yellow container in a wrapper that encapsulates everything ( green in my code )
我开始编写代码,但距离实现结果还很遥远。
I started to write the code , but I am far from achieving the result.
请,对我很好,我是字体开发的新手
Please , be nice to me , I am new to font-end developement and still in the learning process.
此处是Jsfiddle->
Jsfiddle here --> https://jsfiddle.net/9atbtj0L/1/
我将感谢对我的代码所做的任何更正和/或增强。
I will appreciate any corrections and/or enhancements to my code.
代码在这里:
html
<div class="homepage-wrapper">
<div class="homepage-top-category-container">
<div class="homepage-top-category-container-title">
<span id="homepage-top-category-container-title">block title here</span>
</div>
<div class="homepage-top-category-container-list">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catA">
block A
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catB">
block B
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catC">
block C
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catD">
block D
</div>
</div>
</div>
</div>
</div>
css
.homepage-wrapper{ /*This should contain the title of the grid + different blocks*/
background-color: green;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
}
.homepage-top-category-container-title{
background-color: black;
margin-bottom: 10px;
}
#homepage-top-category-container-title{
color: orange;
}
.homepage-top-category-container-list{ /*This should be the container*/
display: flex;
height: auto;
margin-left: auto;
margin-right: auto;
background-color: yellow;
}
.homepage-top-category-container-item{
display: block;
float: none;
width: auto;
height:auto;
border: solid 1px black;
}
谢谢。
********************************编辑***************** ******************
******************************EDIT***********************************
我从社区中知识渊博的成员那里获得了一些修复代码的帮助,所以我更新了我的代码,尽管我注意到了其他一些问题:
I've got some help fixing my code from very knowledgeable members of our community , so I have updated my code , alhough I noticed some others problems :
1-块,它们有足够的空间对齐同一块衬里,所以不要这样做并放到下面。
1- block that have enough space to align on a same lign don't do so and go underneath.
2-我想每行放置4个块,并且它们之间只能有一个左边界。包装器的最大宽度为1080px。
2- I would like to put 4 blocks per line with a left-margin only between them. The max-width for the wrapper is 1080px.
4个255px的divs + 3个左边界20px和0px的极值(第一个div的右侧和最后一个div的左侧)。
4 divs of 255px + 3 left-margin of 20px and 0px on extremes ( right side of the first div and left side of the last div ).
此处已编辑代码:
html:
<div class="homepage-wrapper">
<div class="homepage-top-category-container">
<div class="homepage-top-category-container-title">
<span id="homepage-top-category-container-title">block title here</span>
</div>
<div class="homepage-top-category-container-list">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catA">
<img src="https://s-media-cache-ak0.pinimg.com/originals/3f/b3/1c/3fb31c972e990cb214e55540dd9a2e2b.jpg" width="auto" height="auto">
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catB">
<img src="https://s-media-cache-ak0.pinimg.com/originals/3f/b3/1c/3fb31c972e990cb214e55540dd9a2e2b.jpg" width="auto" height="auto">
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catC">
<img src="https://s-media-cache-ak0.pinimg.com/originals/3f/b3/1c/3fb31c972e990cb214e55540dd9a2e2b.jpg" width="auto" height="auto">
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catD">
<img src="https://s-media-cache-ak0.pinimg.com/originals/3f/b3/1c/3fb31c972e990cb214e55540dd9a2e2b.jpg" width="auto" height="auto">
</div>
</div>
</div>
</div>
和CSS:
.homepage-wrapper{
background-color: green;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
}
.homepage-top-category-container-title{
background-color: black;
margin-bottom: 10px;
}
#homepage-top-category-container-title{
color: orange;
}
.homepage-top-category-container-list{
display: flex;
flex-wrap:wrap;
width: auto;
height: auto;
background-color: yellow;
}
.homepage-top-category-container-list > div {
margin-left: 20px;
margin-bottom: 20px;
}
.homepage-top-category-container-item{
display: block;
float: none;
width: auto;
height:auto;
border: solid 1px black;
}
和JSfiddle此处--->
and JSfiddle here ---> https://jsfiddle.net/mz2u6rzg/
我已添加更好地识别块的图像。感谢我们社区的任何纠正和改进。
I have added an image to better identify blocks. I will appreciate any corrections and enhancements from our community.
感谢您的帮助。
推荐答案
我认为您正在寻找 flex-wrap:wrap
。
:
.homepage-wrapper{ /*This should contain the title of the grid + different blocks*/
background-color: green;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
}
.homepage-top-category-container-title{
background-color: black;
margin-bottom: 10px;
}
#homepage-top-category-container-title{
color: orange;
}
.homepage-top-category-container-list{ /*This should be the container*/
display: flex;
flex-wrap:wrap;
height: auto;
margin-left: auto;
margin-right: auto;
background-color: yellow;
}
.homepage-top-category-container-item{
display: block;
float: none;
width: auto;
height:auto;
border: solid 1px black;
}
<div class="homepage-wrapper">
<div class="homepage-top-category-container">
<div class="homepage-top-category-container-title">
<span id="homepage-top-category-container-title">block title here</span>
</div>
<div class="homepage-top-category-container-list">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catA">
block A
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catB">
block B
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catC">
block C
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catD">
block D
</div>
</div>
</div>
</div>
这篇关于在大屏幕上将n-div彼此相邻放置,在小屏幕上将n-div彼此下方放置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!