如何消除响应列之间的空白？

时间：2019-08-07 05:30:54

标签： javascript html css

当告诉两列布局响应较小的浏览器窗口（例如，在手机上查看）时，我很难找到第二和第三幅图像之间出现的空白的解决方案）。

以下是链接：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 个答案:

答案 0 :(得分：2)

您可以提供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>

答案 1 :(得分：1)

首先，这是导致问题的原因：

@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;
    }
}

答案 2 :(得分：0)

您可以通过从 CSS 中的padding: 60px;中删除@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>

相关问题
最新问题