div彼此下方放置

div彼此下方放置

关注
发信
关注(28)粉丝(399)

在大屏幕上将n-div彼此相邻放置，在小屏幕上将n-div彼此下方放置

本文介绍了在大屏幕上将n-div彼此相邻放置，在小屏幕上将n-div彼此下方放置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在努力实现这种效果；

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彼此下方放置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-31 03:40
Powered by LMLPHP ©2024 div彼此下方放置 0.050796