如何消除響應列之間的空白？
[英]How do I eliminate white space between responsive columns?
問題描述
當告訴兩列布局以響應較小的瀏覽器窗口（即，特別是在手機上查看）時轉到第二列布局時，我很難找到解決第二張和第三張圖片之間出現的空白的解決方案。
這是鏈接： http : //staging1.oakpark.co/72-2/
我嘗試在CSS的響應部分進行編碼無濟於事。
我敢肯定有一個簡單的解決方案，但是我對編碼來說相對較新，因此任何幫助或想法都將不勝感激。 我在想為“ nthchild”編碼是要走的路？
CSS
@font-face {
font-family: "Lyon";
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf");
src:
url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("woff"),
url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("opentype"),
url("http://staging1.oakpark.co/wp-content/uploads/2019/08/Lyon-Text-Regular.svg") format("svg");
}
body {
padding: 0;
margin: 0;
}
* {
box-sizing: border-box;
}
.column {
float: left;
width: 50%;
padding: 5px;
}
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 1100px) {
.column {
width: 50%;
}
}
@media screen and (max-width: 800px) {
.column {
width: 100%;
padding: 0px;
padding-bottom: 60px;
}
}
a:link {
color: black;
background-color: transparent;
text-decoration: underline;
}
a:visited {
color: black;
background-color: transparent;
text-decoration: underline;
}
a:hover {
color: black;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: black;
background-color: transparent;
text-decoration: underline;
}
.navbar {
z-index: 1;
font-family: 'Lyon';
background-color: white;
position: fixed;
bottom: 0;
width: 100%;
border-top: .05rem solid;
display: flex;
justify-content: space-between;
padding: 14px 16px;
margin: 0;
}
.navbar a {
color: black;
font-family: 'Lyon';
font-size: 24px;
text-align: center;
text-decoration: none;
position: relative;
}
.navbar a:hover {
color: black;
font-family: 'Lyon';
text-decoration: none;
}
.navbar li{
list-style:none;
}
.navbar a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.navbar a.active {
background-color: white;
color: black;
font-style: none;
font-family: 'Lyon';
}
.navbar .icon {
display: none;
}
@media screen and (max-width: 600px) {
.navbar a{
display: none;
padding-top: 6px;
}
.navbar .icon {
float: right;
display: block;
}
.navbar.responsive .icon {
position: absolute;
left: 10px;
top: 8px;
}
.navbar.responsive li a {
float;
none;
display: inline;
text-align: center;
margin: 4px;
}
.navbar.responsive li {
float;
none;
text-align: center;
margin: 6px 00px;
}
.navbar.responsive {
align-content: center;
flex-flow:column;
}
.navbar.responsive li a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar.responsive li a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
.margin {
margin: 10px;
}
p {
margin: 10px 0;
}
a img {
display: none;
}
a:hover img {
display: block !important;
position: fixed;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 50%;
max-height: 50%;
}
.container {
position: relative;
width: 100%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: white;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: black;
font-family: 'Lyon';
font-size: 16px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
HTML
<ul class="navbar" id="myNavbar">
<a href="javascript:void(0);" style="font-size:18px;" class="icon" onclick="myFunction()">i</a>
<li><a href="#about" class="active">About</a></li>
<li><a href="#lindsay">Lindsay</a></li>
<li><a href="#contact">Branding</a></li>
<li><a href="#contact">Photography</a></li>
<li><a href="#contact">Instagram</a></li>
</ul>
<div class="margin">
<div class="row">
<div class="column">
<div class="container">
<p><img src="http://staging1.oakpark.co/wp-content/uploads/2019/06/Lindsay-Issue-No-2.jpg" style="width:100%" class="image">
<div class="overlay">
<div class="text">Stipe Nobilo</div>
</div>
</div>
<div class="container">
<p><p><img src="http://staging1.oakpark.co/wp-content/uploads/2019/06/Lindsay-Issue-No-2.jpg" style="width:100%" class="image">
<div class="overlay">
<div class="text">Nils Frahm</div>
</div>
</div>
</div>
<div class="column">
<div class="container">
<p><img src="http://staging1.oakpark.co/wp-content/uploads/2019/06/Lindsay-Issue-No-2.jpg" style="width:100%" class="image">
<div class="overlay">
<div class="text">Korean Barbecue</div></div></div>
<div class="container">
<p><p><img src="http://staging1.oakpark.co/wp-content/uploads/2019/06/Lindsay-Issue-No-2.jpg" style="width:100%" class="image">
<div class="overlay">
<div class="text">Jenny Kee</div>
</div>
</div>
</div>
</div>
JS
<script>
function myFunction() {
var x = document.getElementById("myNavbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
</script>
3 個解決方案
解決方案1
2 2019-08-07 05:38:18
您可以提供800個以下的媒體查詢保證金。
將其從60替換為0。
@media screen and (max-width: 800px) {
.column {
width: 100%;
padding: 0px;
padding-bottom:0px;
}
}
< script > function myFunction() { var x = document.getElementById("myNavbar"); if (x.className === "navbar") { x.className += " responsive"; } else { x.className = "navbar"; } } < /script>
@font-face { font-family: "Lyon"; src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf"); src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("woff"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("opentype"), url("http://staging1.oakpark.co/wp-content/uploads/2019/08/Lyon-Text-Regular.svg") format("svg"); } body { padding: 0; margin: 0; } * { box-sizing: border-box; } .column { float: left; width: 50%; padding: 5px; } .row:after { content: ""; display: table; clear: both; } @media screen and (max-width: 1100px) { .column { width: 50%; } } @media screen and (max-width: 800px) { .column { width: 100%; padding: 0px; padding-bottom: 0px; } .column:last-child .container:last-child {padding-bottom: 50px;} } a:link { color: black; background-color: transparent; text-decoration: underline; } a:visited { color: black; background-color: transparent; text-decoration: underline; } a:hover { color: black; background-color: transparent; text-decoration: underline; } a:active { color: black; background-color: transparent; text-decoration: underline; } .navbar { z-index: 1; font-family: 'Lyon'; background-color: white; position: fixed; bottom: 0; width: 100%; border-top: .05rem solid; display: flex; justify-content: space-between; padding: 14px 16px; margin: 0; } .navbar a { color: black; font-family: 'Lyon'; font-size: 24px; text-align: center; text-decoration: none; position: relative; } .navbar a:hover { color: black; font-family: 'Lyon'; text-decoration: none; } .navbar li { list-style: none; } .navbar a:before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: #000; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .navbar a:hover:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); } .navbar a.active { background-color: white; color: black; font-style: none; font-family: 'Lyon'; } .navbar .icon { display: none; } @media screen and (max-width: 600px) { .navbar a { display: none; padding-top: 6px; } .navbar .icon { float: right; display: block; } .navbar.responsive .icon { position: absolute; left: 10px; top: 8px; } .navbar.responsive li a { float; none; display: inline; text-align: center; margin: 4px; } .navbar.responsive li { float; none; text-align: center; margin: 6px 00px; } .navbar.responsive { align-content: center; flex-flow: column; } .navbar.responsive li a:before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: #000; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .navbar.responsive li a:hover:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); } } .margin { margin: 10px; } p { margin: 10px 0; } a img { display: none; } a:hover img { display: block !important; position: fixed; top: 45%; left: 50%; transform: translate(-50%, -50%); max-width: 50%; max-height: 50%; } .container { position: relative; width: 100%; padding-bottom: 20px; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: white; } .container:hover .overlay { opacity: 1; } .text { color: black; font-family: 'Lyon'; font-size: 16px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; }
<ul class="navbar" id="myNavbar"> <a href="javascript:void(0);" style="font-size:18px;" class="icon" onclick="myFunction()">i</a> <li><a href="#about" class="active">About</a></li> <li><a href="#lindsay">Lindsay</a></li> <li><a href="#contact">Branding</a></li> <li><a href="#contact">Photography</a></li> <li><a href="#contact">Instagram</a></li> </ul> <div class="margin"> <div class="row"> <div class="column"> <div class="container"> <img src="http://staging1.oakpark.co/wp-content/uploads/2019/06/Lindsay-Issue-No-2.jpg" style="width:100%" class="image"> <div class="overlay"> <div class="text">Stipe Nobilo</div> </div> </div> <div class="container"> <img src="http://staging1.oakpark.co/wp-content/uploads/2019/06/Lindsay-Issue-No-2.jpg" style="width:100%" class="image"> <div class="overlay"> <div class="text">Nils Frahm</div> </div> </div> </div> <div class="column"> <div class="container"> <img src="http://staging1.oakpark.co/wp-content/uploads/2019/06/Lindsay-Issue-No-2.jpg" style="width:100%" class="image"> <div class="overlay"> <div class="text">Korean Barbecue</div> </div> </div> <div class="container"> <img src="http://staging1.oakpark.co/wp-content/uploads/2019/06/Lindsay-Issue-No-2.jpg" style="width:100%" class="image"> <div class="overlay"> <div class="text">Jenny Kee</div> </div> </div> </div> </div>
解決方案2
1 2019-08-07 05:37:54
首先，這是導致問題的原因：
@media screen and (max-width: 800px) {
.column {
width: 100%;
padding-bottom: 60px;
}
更改為：
@media screen and (max-width: 800px) {
.column {
width: 100%;
padding-bottom: 0px;
}
}
那么如果圖像之間的所有空間都應該相同，則將此處的空間設置為0並查看不同之處：
@media screen and (max-width: 800px) {
.column {
padding: 0;
}
p {
margin: 0;
}
}
並為每個圖像添加5px ：
@media screen and (max-width: 800px) {
.container {
padding-bottom: 5px;
}
}
解決方案3
0 2019-08-07 05:38:42
您可以通過刪除padding: 60px;來刪除空格padding: 60px; 來自@media screen and (max-width: 800px).column CSS中的 @media screen and (max-width: 800px).column 。 還要注意，您的HTML代碼中有很多錯誤，沒有關閉任何<p>元素。
function myFunction() { var x = document.getElementById("myNavbar"); if (x.className === "navbar") { x.className += " responsive"; } else { x.className = "navbar"; } }
@font-face { font-family: "Lyon"; src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf"); src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("woff"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("opentype"), url("http://staging1.oakpark.co/wp-content/uploads/2019/08/Lyon-Text-Regular.svg") format("svg"); } body { padding: 0; margin: 0; } * { box-sizing: border-box; } .column { float: left; width: 50%; padding: 5px; } .row:after { content: ""; display: table; clear: both; } @media screen and (max-width: 1100px) { .column { width: 50%; } } @media screen and (max-width: 800px) { .column { width: 100%; padding: 0px; } } a:link { color: black; background-color: transparent; text-decoration: underline; } a:visited { color: black; background-color: transparent; text-decoration: underline; } a:hover { color: black; background-color: transparent; text-decoration: underline; } a:active { color: black; background-color: transparent; text-decoration: underline; } .navbar { z-index: 1; font-family: 'Lyon'; background-color: white; position: fixed; bottom: 0; width: 100%; border-top: .05rem solid; display: flex; justify-content: space-between; padding: 14px 16px; margin: 0; } .navbar a { color: black; font-family: 'Lyon'; font-size: 24px; text-align: center; text-decoration: none; position: relative; } .navbar a:hover { color: black; font-family: 'Lyon'; text-decoration: none; } .navbar li { list-style: none; } .navbar a:before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: #000; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .navbar a:hover:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); } .navbar a.active { background-color: white; color: black; font-style: none; font-family: 'Lyon'; } .navbar .icon { display: none; } @media screen and (max-width: 600px) { .navbar a { display: none; padding-top: 6px; } .navbar .icon { float: right; display: block; } .navbar.responsive .icon { position: absolute; left: 10px; top: 8px; } .navbar.responsive li a { float: none; display: inline; text-align: center; margin: 4px; } .navbar.responsive li { float: none; text-align: center; margin: 6px 00px; } .navbar.responsive { align-content: center; flex-flow: column; } .navbar.responsive li a:before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: #000; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .navbar.responsive li a:hover:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); } } .margin { margin: 10px; } p { margin: 10px 0; } a img { display: none; } a:hover img { display: block !important; position: fixed; top: 45%; left: 50%; transform: translate(-50%, -50%); max-width: 50%; max-height: 50%; } .container { position: relative; width: 100%; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: white; } .container:hover .overlay { opacity: 1; } .text { color: black; font-family: 'Lyon'; font-size: 16px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; }
<ul class="navbar" id="myNavbar"> <a href="javascript:void(0);" style="font-size:18px;" class="icon" onclick="myFunction()">i</a> <li><a href="#about" class="active">About</a></li> <li><a href="#lindsay">Lindsay</a></li> <li><a href="#contact">Branding</a></li> <li><a href="#contact">Photography</a></li> <li><a href="#contact">Instagram</a></li> </ul> <div class="margin"> <div class="row"> <div class="column"> <div class="container"> <p><img src="http://staging1.oakpark.co/wp-content/uploads/2019/06/Lindsay-Issue-No-2.jpg" style="width:100%" class="image"></p> <div class="overlay"> <div class="text">Stipe Nobilo</div> </div> </div> <div class="container"> <p><img src="http://staging1.oakpark.co/wp-content/uploads/2019/06/Lindsay-Issue-No-2.jpg" style="width:100%" class="image"></p> <div class="overlay"> <div class="text">Nils Frahm</div> </div> </div> </div> <div class="column"> <div class="container"> <p><img src="http://staging1.oakpark.co/wp-content/uploads/2019/06/Lindsay-Issue-No-2.jpg" style="width:100%" class="image"></p> <div class="overlay"> <div class="text">Korean Barbecue</div> </div> </div> <div class="container"> <p><img src="http://staging1.oakpark.co/wp-content/uploads/2019/06/Lindsay-Issue-No-2.jpg" style="width:100%" class="image"></p> <div class="overlay"> <div class="text">Jenny Kee</div> </div> </div> </div> </div>
如何用隱藏的unicode字符消除Dom中的空白？
[英]how do you eliminate white space from the Dom with hidden unicode characters?
如何在響應圖像和下面的元素之間創建固定數量的空間？
[英]How do I create a fixed amount of space between a responsive image and an element below?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.