我的页面右侧有一个奇怪的缝隙

詹姆斯·维维安(James Vivian)

我根据自己的任务制作了页面,除了我做过的事情导致15px页面右侧显示了其他内容外,尽管您必须水平滚动才能看到它。我不确定造成该问题的原因,但我真的很希望获得一些帮助,以弄清问题及其解决方法。

我的代码:

body {
  margin: 0;
  padding: 0;
  width: 100%;
  background: url("images/background.jpg") no-repeat center center fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-color: rgb(153, 145, 122);
  background: -webkit-linear-gradient(left, aqua, mediumslateblue);
  background: -o-linear-gradient(right, aqua, mediumslateblue);
  background: -moz-linear-gradient(right, aqua, mediumslateblue);
  background: linear-gradient(to right, aqua, mediumslateblue);
  font: 1em Verdana, sans-serif;
}

header {
  position: inline;
  width: 100%;
  margin: 0 auto;
  margin-top: 0;
  padding: 0;
  height: 60px;
  line-height: 40px;
  background-color: black;
}

ul {
  margin: 0 auto;
  margin-right: 5px
}

.imagesEnlarged {
  margin: 0 auto;
  width: 45%;
  height: 45%;
}

.logo {
  color: white;
  float: left;
  margin-top: 10px;
  margin-left: 10px;
}

.nav {
  float: right;
  color: white;
  margin: 0;
  margin-top: 0;
}

nav ul li {
  display: inline;
  float: right;
  padding: 0 5px
}

.banner {
  background: url("images/background.jpg") no-repeat center center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  height: 200px;
  width: 100%;
}

#wrapper {
  margin: 5px;
  width: 100%;
}

.buttonHolder {
  display: block;
  position: absolute;
  left: 50%;
  top: 80%;
  transform: translate(-50%, -50%);
}

.buttonHolderGallery {
  display: block;
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
}

#text {
  Width: 100%;
  padding: 0;
}

li {
  list-style-type: none;
  float: right;
  border-left: 1px solid white;
}

li a {
  display: block;
  padding: 8px;
  background-color: black;
}

li a:hover {
  background-color: grey;
}

.gallery {}

footer {
  position: fixed;
  text-align: left;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 65px;
  background-color: black;
}

@media only screen and (max-width:1200px) {
  body {
    font-size: 0.8em;
  }
  .buttonHolder {
    top: 65%;
  }
  footer {
    font-size: 0.9em;
  }
  .client {
    display: inline;
    width: 40%;
  }
}

@media only screen and (max-width:800px) {
  body {
    font-size: 0.6em;
  }
  .buttonHolder {
    top: 65%;
  }
  footer {
    font-size: 0.9em;
  }
  .images {
    display: block;
    width: 80%;
  }
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.white {
  color: white;
  text-align: center;
  float: right
}

.fa {
  padding: 20px;
  font-size: 30px;
  width: 10px;
  text-align: center;
  text- decoration: none;
  border-radius: 50%;
}

.newspaper {
  -webkit-column-count: 3;
  /* Chrome, Safari, Opera */
  -moz-column-count: 3;
  /* Firefox */
  column-count: 3;
  -webkit-column-gap: 60px;
  /* Chrome, Safari, Opera */
  -moz-column-gap: 60px;
  /* Firefox */
  column-gap: 60px;
  margin-right: 15px;
}

.split {
  -webkit-column-count: 2;
  /* Chrome, Safari, Opera */
  -moz-column-count: 2;
  /* Firefox */
  column-count: 2;
  -webkit-column-gap: 80px;
  /* Chrome, Safari, Opera */
  -moz-column-gap: 80px;
  /* Firefox */
  column-gap: 80px;
  margin-right: 15px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<header>
  <div class="logo">Photography Masters</div>
  <nav>
    <ul>
      <li><a href="#link"> About</a></li>
      <li><a href="#link"> Contact</a></li>
      <li><a href="#link"> Gallery</a></li>
      <li><a href="#link"> Services</a></li>
    </ul>
  </nav>
</header>

<section class="banner">
</section>

<div id="wrapper">
  <section id="text">
    <h1>About Us</h1>
    <section class="split">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elementum feugiat risus, a vulputate enim imperdiet at. Suspendisse nec nisi ut sem efficitur pulvinar. Proin eros ex, scelerisque eget eleifend non, vestibulum sit amet lacus. Sed
        dignissim eget libero quis condimentum. Cras ullamcorper aliquet orci ut maximus. Sed congue sem non dui sagittis ultricies non a turpis. Maecenas at mi vestibulum, tempor leo venenatis, sodales massa. Mauris commodo ac mauris a tincidunt. Nunc
        et neque sagittis, ultrices tellus nec, tincidunt mi. Nulla pretium leo libero, quis molestie arcu venenatis et. Phasellus dapibus sem ac tristique gravida. Aliquam felis augue, efficitur egestas orci vitae, convallis viverra nisi. Vivamus quis
        molestie erat, quis gravida arcu. Aliquam enim orci, accumsan sed justo ut, hendrerit lobortis nibh.
        <img class="imagesEnlarged" src=images/about.JPG alt="Model Shoot">
      </p>
    </section>
    <p>Aliquam quis laoreet enim. Nam eu nunc eu sem suscipit ullamcorper bibendum et velit. Nunc sit amet dui elit. Nullam malesuada, leo ut facilisis tristique, neque massa tempor nibh, vel dignissim nulla sapien fringilla orci. Integer sit amet eros vehicula,
      eleifend velit vel, venenatis metus. Quisque mattis semper vulputate. Ut eu malesuada est, non luctus ipsum. Etiam sed urna viverra, tincidunt est vitae, malesuada diam. Pellentesque ipsum nisi, posuere sed sem at, ultrices tempus dolor. Cras suscipit
      non odio sed tincidunt. Nam ut nisi quis elit semper tempus. Proin ac aliquam quam. Sed luctus convallis hendrerit. </p>
    <div class="buttonHolderGallery">
      <input class=button type="submit" value="See More">
    </div>
  </section>
</div>

<footer class="grey2">
  <a href="#" class="fa fa-facebook"></a>
  <a href="#" class="fa fa-twitter"></a>
  <a href="#" class="fa fa-linkedin"></a>
  <a class="white"> Copyright Photography Masters 2017</a>
</footer>

sdr981

包装纸上的边距<div>导致了这种情况。您可以将此div的CSS更改为:

margin: 5px 0px 5px 0px;

删除左侧和右侧的边距,仅将其保留在顶部和底部;摆脱造成您问题的多余空间。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

显示网格-背景右侧有一个白色缝隙

我有一个奇怪的错误

我如何在右侧有一个多选选项

我对 react-modal 有一个奇怪的问题

我的 python 代码有一个奇怪的输出

我有一个关于 Laravel 迁移的奇怪问题

PopupMenuButton菜单始终在屏幕侧面有一个缝隙

我购买了一个域名。但它加载了奇怪的页面

为什么我的页面右侧有一堆空白?

在盒子里画一个圆形的缝隙

我的蜘蛛网周围有一个奇怪的圆圈,我该如何解决?

我的网站图标有一个奇怪的问题,在某些视图中没有显示

按顺序在右侧有一个导航栏

我有一个JSP页面,我想在其中搜索一些结果

我的Azure网站在(监视)门户中有一个奇怪的“ HTTP成功”模式

我的 Laravel 站点的视图文件有一个奇怪的问题,这怎么可能?

我在PHP中有一个非常奇怪的函数returnvalue行为

我的NodeJS初始化给出了一个奇怪的错误并且没有更新

Wordpress“我认为您有一个奇怪的分隔符”

我在 python 中的像素颜色更改算法有一个奇怪的行为

我对Paypal自适应API有一个奇怪的问题

小数点位置问题。我有一个论坛,需要平均值在小数点右侧

我在大网站的所有页面(.aspx页面)中都有一个我想要的类

我将如何设置一个 HTML 页面以在每一天都有一个新标题?

我有一个数组,我想在页面刷新时随机生成

LinearLayout中的LinearLayout具有3个元素-一个在左侧,一个在中心,一个在右侧

我可以在 Android 上拥有一个没有布局的应用页面吗?

phpseclib给了我一个奇怪的错误

熊猫替换给我一个奇怪的错误