Question

我正在努力实现这一效果;

如果屏幕足够大，我想把n-divs放在彼此旁边，否则就把它们放在彼此之下，我希望那些n-div包含在一个div中（我的代码中的黄色容器））和标题区域（我的代码中的黑色）+包装中的黄色容器封装了所有内容（代码中为绿色）

我开始编写代码，但我远未实现结果。

拜托，对我好，我是字体结束发展的新手，仍然在学习过程中。

Jsfiddle在这里 - ＆gt; https://jsfiddle.net/9atbtj0L/1/

我将非常感谢我对代码的任何更正和/或改进。

代码在这里：

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 **************** *******************

我从社区知识渊博的成员那里得到一些帮助来修复我的代码，所以我更新了我的代码，尽管我注意到其他一些问题：

1-块有足够的空间可以在同一个木板上对齐，但不要这样做并进入下面。

2-我想每行放4个块，左边距只在它们之间。包装器的最大宽度为1080px。

255px的4个div + 3个左边距20px和0px极值（第一个div的右边和最后一个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在这里---＆gt; https://jsfiddle.net/mz2u6rzg/

我添加了一张图片以更好地识别块。我将非常感谢社区的任何更正和改进。

感谢您的帮助。

Answer 1

我认为您正在寻找flex-wrap:wrap。

根据the MDN reference：

CSS flex-wrap属性指定是将flex项强制为单行还是可以包装到多行。

.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>

Answer 2

你可以使用媒体查询来实现这一点。我已经使用400px作为你可以选择使用的断点。这是一个有用的JSfiddle链接https://jsfiddle.net/0f5y8q8b/

@media only screen and (min-width: 400px) {
    .homepage-top-category-container-item{
        width: 100%
    }
    .homepage-top-category-container-list{
      display:block
    }

}

Answer 3

您可以使用css媒体标签检查屏幕尺寸，但可能与旧浏览器不兼容

@media only screen and (max-width: 1023px) {
}

@media only screen and (min-width: 1024px) {
}

请参阅CSS media queries for screen sizes

我在“正常”造型之后用这段代码更新了你的小提琴，所以它会覆盖你班级的“默认”显示

@media only screen and (max-width: 300px) {
  .homepage-top-category-container-list{ /*This should be the container*/
  display: block;
  }
}

https://jsfiddle.net/9atbtj0L/1/

如果您使用放大/缩小浏览器，您会看到它正在运行。

希望这会有所帮助

在大屏幕上将n-divs彼此相邻，在小屏幕上将n-divs彼此相邻

3 个答案: