gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 07:33:05 26 4
gpt4 key购买 nike

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

我正在构建一个宽度为 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/

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