css - 尝试使用纯 CSS Flexbox 制作带装订线的 3 列网格

标签 css flexbox grid margin

我在这里处理一个堆栈..

我正在构建一个宽度为 100% 并在达到 768 像素时更改为 90% 的网站。包含 6 张图像的部分(2 行，每行 3 张图像)无法按我的意愿工作。图像在达到 768px 之前没有边距，超过此尺寸我想在图像周围应用 5 或 10px 的边距，但将它们保持在 3列。我认为使用 border-box 作为我的 box-sizing 属性可以保护我免受图像换行到下一行的影响，但事实并非如此。我试图对图像包装器应用负边距，但事实并非如此要么工作。你能帮我找到那个问题的解决方案吗？

PS:当图像的最大宽度达到 1320px 时，代码完全按照我想要的方式工作(代码应用于媒体查询最小宽度 992px)。它是精确的，并且与我制作的引导 div 具有完全相同的宽度/边距。

我需要它作为最终结果，以一种完全响应和流畅的方式(使用 % 因为可能会包含新图像并且必须保持相等的边距，无论视口(viewport)的大小是多少):

enter image description here

谢谢!

代码如下:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <title>RESTAURANT</title>

    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

    <!--     Favicon     -->
    <link rel="shortcut icon" type="image/png" href=""/>

    <!--     Fonts Google    -->

        <!-- 1. Poppins -->
        <link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,400i,500,600,700" rel="stylesheet">

        <!-- 2. Herr Von Muellerhoff -->
        <link href="https://fonts.googleapis.com/css?family=Herr+Von+Muellerhoff" rel="stylesheet">

        <!-- 3. Open Sans -->
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

    <!-- Font-awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />


    <!-- CSS Style -->
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="style-mqueries.css"><!--media queries-->
</head>

<body>
<div class="site-container">

<header class="grey4-bg flex-center section-sep">
    <h1>HEADER</h1>
</header>

<main>
    <section class="services section-sep">
        <div class="marged">

        <div class="section-header">
            <h2 class="handwriting">Services</h2>
            <h3>super class service</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae fugit labore delectus.</p>
        </div>

            <div class="images-parent neg-margin flex">
                <div class="img-holder bg-img"></div>
                <div class="img-holder bg-img"></div>
                <div class="img-holder bg-img"></div>

                <div class="img-holder bg-img"></div>
                <div class="img-holder bg-img"></div>
                <div class="img-holder bg-img"></div>
            </div>
        </div><!-- /.marged -->
    </section><!-- /.services -->
</main>

<section class="guide">
    <div class="marged pad-v10 blue-bg txt-center white-txt">guide</div>
</section>


</div><!-- /.site-container -->
</body>
</html>

CSS

@charset "UTF-8";

*{margin: 0; padding: 0; font-family: 'Poppins', sans-serif;}

body{height:100%; color:#292929;}
html{height:100%; font-size:16px; box-sizing:border-box;}
*, *:before, *:after{box-sizing:border-box;}
ul{list-style: none;}
a{color:inherit;text-decoration: none;}
p{font-family: 'Open Sans', sans-serif;}

/* POSITIONING ELEMENTS */
/* Flex, Margin, Padding */

.flex, .flex-col, .justify-c, .flex-align-c, .flex-center, .flex-col-center {display: flex; }

.txt-center{text-align: center;}

/* COLORS and SHADOWS*/


.white-bg{ background-color: #fff; } .white-txt{ color: #fff; }
.grey4-bg{background-color:#f1f4f9;} .grey4-txt{color:#f1f4f9;}
.blue-bg{ background-color: #3F72AF; } .blue-txt{ color: #3F72AF; }


/* OTHER */

.bg-img{background-size:cover; background-position:center center; background-repeat:no-repeat;}
.hidden-sm{display:none;}
.visible-md{display:none;}
.visible-lg{display:none;}


/* WEBSITE STYLE */ 
/* GENERAL */
/* MATERIAL KIT - ELEMENTS */


.section-sep{padding: 20px 0;  }
.marged{max-width:1170px; margin:0 auto;}


.section-header{
    padding-top:10px;
    padding:bottom:20px;
    padding-left:10px;
    padding-right:10px;
    text-align:center;
}

.section-header h2{
    margin-bottom:-25px;
    color:#e7e7e7;
    font-size:60px;
    font-family: 'Herr Von Muellerhoff', cursive;
    font-weight:400;
    line-height:1em;
}

.section-header h3{
    color:#474747;
    margin-bottom:10px;
    line-height:1.2em;
    font-size:;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
}

.section-header p{
    color:#8d8d8d;
    max-width:446px;
    margin:0 auto;
    padding:10px 0;
    line-height:1em;
    font-size:14px;
    font-weight:300;
}


.btn{
    min-width:200px;
    padding:20px 0;
    background-color:#606060;
    color:#fff;
    text-transform:uppercase;
    cursor:pointer;
}

/******************************************************

*********************** HEADER  ***********************

*******************************************************/



h1 {
  font-size: 55px;
  background: -webkit-linear-gradient(left,#ee0979 0%, #ff5c3b 30%);
  background: linear-gradient(to right,#ee0979 0%, #ff5c3b 30%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


/******************************************************

***********************  MAIN  ************************

*******************************************************/


/* SECTION : SERVICES */


.services .flex{
    justify-content:center;
    flex-wrap:wrap;
}


.neg-margin{
    margin-left:0px;
    margin-right:0px;
}

.services .images-parent{
    padding-top:30px;
    background-color:pink;
}

.services .img-holder{
    background-image:url("https://images6.alphacoders.com/434/434430.jpg");
    width:33.33%;
    height:100px;
    max-height:300px;
}

媒体查询

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

    .services .img-holder{
        height:150px;
    }

  }

/* MD - MEDIUM */
@media only screen and (min-width: 768px) { 

    .marged{
        width:90%;
    }

    .services .img-holder{
        margin:5px;
    }
 }

/* LG - LARGE */
@media only screen and (min-width: 992px) { 
    .neg-margin{
        margin-left:-15px;
        margin-right:-15px;
    }

    .services .img-holder{
        height:300px;
        max-width:370px;
        margin:15px;
    }
 }

最佳答案

这是你想要的吗？？

@charset "UTF-8";
* {
	margin: 0;
	padding: 0;
	font-family: 'Poppins', sans-serif;
}
body {
	height: 100%;
	color: #292929;
}
html {
	height: 100%;
	font-size: 16px;
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: border-box;
}
ul {
	list-style: none;
}
a {
	color: inherit;
	text-decoration: none;
}
p {
	font-family: 'Open Sans', sans-serif;
}
/* POSITIONING ELEMENTS */
/* Flex, Margin, Padding */

.flex, .flex-col, .justify-c, .flex-align-c, .flex-center, .flex-col-center {
	display: flex;
}
.txt-center {
	text-align: center;
}
/* COLORS and SHADOWS*/


.white-bg {
	background-color: #fff;
}
.white-txt {
	color: #fff;
}
.grey4-bg {
	background-color: #f1f4f9;
}
.grey4-txt {
	color: #f1f4f9;
}
.blue-bg {
	background-color: #3F72AF;
}
.blue-txt {
	color: #3F72AF;
}
/* OTHER */

.bg-img {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.hidden-sm {
	display: none;
}
.visible-md {
	display: none;
}
.visible-lg {
	display: none;
}
/* WEBSITE STYLE */ 
/* GENERAL */
/* MATERIAL KIT - ELEMENTS */


.section-sep {
	padding: 20px 0;
}
.marged {
	max-width: 1170px;
	margin: 0 auto;
}
.section-header {
	padding-top: 10px;
 padding:bottom:20px;
	padding-left: 10px;
	padding-right: 10px;
	text-align: center;
}
.section-header h2 {
	margin-bottom: -25px;
	color: #e7e7e7;
	font-size: 60px;
	font-family: 'Herr Von Muellerhoff', cursive;
	font-weight: 400;
	line-height: 1em;
}
.section-header h3 {
	color: #474747;
	margin-bottom: 10px;
	line-height: 1.2em;
 font-size:;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.section-header p {
	color: #8d8d8d;
	max-width: 446px;
	margin: 0 auto;
	padding: 10px 0;
	line-height: 1em;
	font-size: 14px;
	font-weight: 300;
}
.btn {
	min-width: 200px;
	padding: 20px 0;
	background-color: #606060;
	color: #fff;
	text-transform: uppercase;
	cursor: pointer;
}
/******************************************************

*********************** HEADER  ***********************

*******************************************************/



h1 {
	font-size: 55px;
	background: -webkit-linear-gradient(left, #ee0979 0%, #ff5c3b 30%);
	background: linear-gradient(to right, #ee0979 0%, #ff5c3b 30%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
/******************************************************

***********************  MAIN  ************************

*******************************************************/


/* SECTION : SERVICES */


.services .flex {
	justify-content: space-between;
	flex-wrap: wrap;
}
.neg-margin {
	margin-left: 0px;
	margin-right: 0px;
}
.services .images-parent {
	padding-top: 30px;
	background-color: pink;
	margin-left: 0;
	margin-right: 0;
}
.services .img-holder {
	background-image: url("https://images6.alphacoders.com/434/434430.jpg");
	width: 33.33%;
	height: 100px;
	max-height: 300px;
}

@media only screen and (min-width: 576px) {
	.services .img-holder {
		height: 150px;
	}
}

/* MD - MEDIUM */
@media only screen and (min-width: 768px) {
	.marged {
		width: 90%;
	}
	.services .img-holder {
		margin: 5px;
	}
}

/* LG - LARGE */
@media only screen and (min-width: 992px) {
	.neg-margin {
		margin-left: -15px;
		margin-right: -15px;
	}
	.services .img-holder {
		height: 300px;
		max-width: 370px;
		margin: 13px 0;
	}
}

@media only screen and (max-width: 768px) {
	.services .img-holder {
	   width: 32%;
     margin: 6px 0 !important;
	}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>RESTAURANT</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

<!--     Favicon     -->
<link rel="shortcut icon" type="image/png" href=""/>

<!--     Fonts Google    -->

<!-- 1. Poppins -->
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,400i,500,600,700" rel="stylesheet">

<!-- 2. Herr Von Muellerhoff -->
<link href="https://fonts.googleapis.com/css?family=Herr+Von+Muellerhoff" rel="stylesheet">

<!-- 3. Open Sans -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<!-- Font-awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />

<!-- CSS Style -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style-mqueries.css">
<!--media queries-->
</head>

<body>
<div class="site-container">
    <header class="grey4-bg flex-center section-sep">
        <h1>HEADER</h1>
    </header>
    <main>
        <section class="services section-sep">
            <div class="marged">
                <div class="section-header">
                    <h2 class="handwriting">Services</h2>
                    <h3>super class service</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae fugit labore delectus.</p>
                </div>
                <div class="images-parent neg-margin flex">
                    <div class="img-holder bg-img"></div>
                    <div class="img-holder bg-img"></div>
                    <div class="img-holder bg-img"></div>
                    <div class="img-holder bg-img"></div>
                    <div class="img-holder bg-img"></div>
                    <div class="img-holder bg-img"></div>
                </div>
            </div>
            <!-- /.marged --> 
        </section>
        <!-- /.services --> 
    </main>
    <section class="guide">
        <div class="marged pad-v10 blue-bg txt-center white-txt">guide</div>
    </section>
</div>
<!-- /.site-container -->
</body>
</html>

关于css - 尝试使用纯 CSS Flexbox 制作带装订线的 3 列网格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49205719/

上一篇：html - 适合边框内的内容

下一篇：javascript - 下拉菜单没有列出所有元素

相关文章：

css - 总是用 flexbox 包装至少两个元素

html - 如何将列内容包装到滚动底部？

java - Java3D/OpenGL 角点网格的内存高效实现

css - 如何对齐一些顶级主 divi 菜单项

html - 调整内容与对齐内容之间的区别

html - 在 IOS 上启用画外音时移动菜单未打开

css - Bootstrap 4 Grid 在 UL 内部不工作

css - 在 susy 网格框架中使用大网格(即 48 列)是否有缺点？

css - 3 个带溢出滚动的 div 不适合页面最大高度 100%

html - 使 flex 元素换行到下一行，以下元素继续流动

©2024 IT工具网  联系我们