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

标签 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>

最佳答案

您提供的 margin 低于 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>

关于javascript - 如何消除响应列之间的空白？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57387526/

上一篇：html - 如何从该按钮的中间绘制一条垂直线？

下一篇：javascript - 如何在 jquery 模糊事件监听器上应用条件

相关文章：

php - HTML 帮助 - 找到一种将隐藏值添加到 td 字段的方法

html - 100vh 导致滚动条？

css - asp.net mvc 模型的 EF Code First 模型更改后，如何在 Azure 中正确更新 SQL 数据库？

c# - 从网页中读取文本字符串

javascript - 当我单击时引​​导切换按钮不起作用

javascript - 单击按钮时如何使按钮下的特定 li 出现

javascript - 无法使用 NodeJS 登录生成 jwt token

javascript - 使用 Jquery 的图表

javascript - React Styled Components 性能

html - 如何更改调整大小 handle 的外观？

©2024 IT工具网  联系我们