【发布时间】：2018-08-18 17:32:55
【问题描述】：
我在这里处理一个堆栈..
我正在构建一个宽度为 100% 并在达到 768 像素时更改为 90% 的网站。有 6 张图片的部分（2 行，每张 3 张图片没有按我的意愿工作。图像在达到 768 像素之前没有边距，超过这个尺寸我想在图像周围应用 5 或 10 像素的边距，但将它们保持在 3列。我认为使用边框框作为我的 box-sizing 属性可以保护我免受图像换行到下一行，但事实并非如此。我试图对图像包装器应用负边距，但事实并非如此也可以。你能帮我找到解决这个问题的方法吗？
PS：当图像的最大宽度达到 1320 像素时，代码完全按照我想要的方式工作（应用于媒体查询最小宽度 992 像素的代码）。它很精确，并且与我制作的指南 div 具有完全相同的宽度/边距。
我需要这个作为最终结果，在某种程度上它是完全响应和流畅的（使用 % 因为可能会包含新图像并且必须保持相等的边距，无论视口的大小是）：
谢谢！
代码如下：
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;
}
}
【问题讨论】：
-
不清楚你在找什么......？......也不需要发布所有代码......尝试在这里制作一个简单的工作sn-p，这样会很容易为我们解决问题