网站意外溢出

时间：2018-05-22 17:48:52

标签： html css

我正在为学校做一个项目并且一切顺利，除了我试图将一些文本对齐到页面的右侧并且每当我这样做时（可能不是正确的方法）它会导致额外的空白要显示的网页和水平滚动条。我一直在努力修复它，但我仍然是HTML和CSS的新手，只是无法掌握它，任何帮助都非常感谢！

 <!DOCTYPE html>
<html>
    <head>
            <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
     <link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
  <!-- or -->
  <link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

  <link rel="stylesheet" href="css/animate.css">
        <style>

html, body {
    max-width: 100%;
    overflow-x: hidden;
  font: normal 75% Arial, Helvetica, sans-serif;
  background-color: white;

}


canvas {
  display: block;
  vertical-align: bottom;
}


/* ---- particles.js container ---- */

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom left, navy, teal);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  z-index: -2;
 border-bottom-style: solid;
 border-width:1px;
}

.count-particles {
  position: absolute;
  top: 48px;
  left: 0;
  width: 80px;
  color: #13E8E9;
  font-size: .8em;
  text-align: left;
  text-indent: 4px;
  line-height: 14px;
  padding-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
}

.js-count-particles {
  font-size: 1.1em;
}


.button-container {
  position: absolute;
  width: 100%;
  top: 40%;
  transform: translateY(-50%);
  text-align: center;
}

.button-container h1 {
  display: inline-block;
}

.center {
  display: flex;
  justify-content: center; 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}


.bibliography{
  justify-content: center; 
  position: absolute;
  top: 108%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color:navy;

}

.bibliographytext{
  justify-content: left; 
  position: absolute;
  top: 129%;
  left: 35%;
  transform: translate(-50%, -50%);
  text-align: left;
  color:navy;
  padding-bottom:15px;

}


.wrapper {
  column-count: 2;
  column-gap: 50px;
  padding: 50px;
}

p {
  line-height: 1.6; 
  font-family: Helvetica;
  margin: 0;
  font-size: 14px;
}

.star {
  float: left;
  width: 125px;
  shape-outside: url(gatsby.jpeg);
  shape-margin:20px;
  margin-right: 20px;
  margin-bottom: 20px;
}

.wow { visibility: hidden; }

.right {
    float: center;
        position: absolute;
    top: 145%;
    text-align:left;
   overflow-x: hidden;
     transform: translateX(60%);
}


/* add glow to button *\

    </style>
</head>
<body>
    <div class="container">
    <h1 style="font-family: Brush Script MT; font-size:75px; color:#DCDCDC;cursor: default;" class="center">The Great Gatsby</h1>
</div>




  <div class="particlesdiv2" id="particles-js"></div>
  <div>
    <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
  </div>

<script> particlesJS("particles-js", {"particles":{"number":{"value":80,"density":{"enable":true,"value_area":800}},"color":{"value":"#ffffff"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.5,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":true,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":6,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"repulse"},"onclick":{"enable":true,"mode":"push"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":40,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});var count_particles, stats, update; stats = new Stats; stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild(stats.domElement); count_particles = document.querySelector('.js-count-particles'); update = function() { stats.begin(); stats.end(); if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) { count_particles.innerText = window.pJSDom[0].pJS.particles.array.length; } requestAnimationFrame(update); }; requestAnimationFrame(update);;
</script>

 <script src="js/wow.min.js"></script>
              <script>
              new WOW().init();
              </script>



<div id="bibliography" class="bibliography container">
<h2>A Little About Gatsby</h2>
<h3><i>Bibliography</i>
</div>

<div class="wrapper bibliographytext container">

  <img src="gatsby.jpeg" alt="" class="star wow slideInRight" data-wow-duration="2s">


  <p class="wow slideInRight" data-wow-duration="2s" data-wow-delay="1s">Lorem ipsum dolor sit amet, his qualisque maluisset evertitur ei, rebum erant antiopam vel id. Etiam sonet ex nam, vis dicam invenire ne. An mei vitae aliquid assentior, at mei vide praesent. In lobortis tractatos argumentum qui, eu vivendo evertitur nam. Eu legendos gubergren mea, ea suas utinam libris mel.</p>



<hr>
</div>

<div class=" right wrapper container">

  <img src="gatsby.jpeg" alt="" class="star wow slideInRight" data-wow-duration="2s">
<p>

Lorem ipsum dolor sit amet, his qualisque maluisset evertitur ei, rebum erant antiopam vel id. Etiam sonet ex nam, vis dicam invenire ne. An mei vitae aliquid assentior, at mei vide praesent. In lobortis tractatos argumentum qui, eu vivendo evertitur nam. Eu legendos gubergren mea, ea suas utinam libris mel.

  </p>

  <hr>

</div>




        </body>
</html>

3 个答案:

答案 0 :(得分：1)

在“右包装器容器”div上添加right:0;并删除transform: translateX(60%); css属性。

并删除浮动中心样式。没有浮动中心这样的东西。

答案 1 :(得分：0)

您需要移除1 Pakistan VS India 2 Srilanka VS Pakistan 3 Srilanka VS India 4 Australia VS Srilanka 5 Australia VS Pakistan 6 Australia VS India 并添加transform: translateX(60%);

这是更新的CSS来解决您的问题：

right: 0;

Working demo

答案 2 :(得分：0)

我做了一些小改动css和HTML格式请检查。 我已尝试解决您的问题。

感谢。

＆＃13;
＆＃13; 
html, body {
    max-width: 100%;
    overflow-x: hidden;
  font: normal 75% Arial, Helvetica, sans-serif;
  background-color: white;

}


canvas {
  display: block;
  vertical-align: bottom;
}


/* ---- particles.js container ---- */

#particles-js {

  width: 100%;
  min-height: 100vh;
  background: linear-gradient(to bottom left, navy, teal);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  z-index: -2;
 border-bottom-style: solid;
 border-width:1px;
}

.count-particles {
  position: absolute;
  top: 48px;
  left: 0;
  width: 80px;
  color: #13E8E9;
  font-size: .8em;
  text-align: left;
  text-indent: 4px;
  line-height: 14px;
  padding-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
}

.js-count-particles {
  font-size: 1.1em;
}


.button-container {
  position: absolute;
  width: 100%;
  top: 40%;
  transform: translateY(-50%);
  text-align: center;
}

.button-container h1 {
  display: inline-block;
}

.center {
  display: flex;
  justify-content: center; 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}


.bibliography{
  justify-content: center; 
  text-align: center;
  color:navy;
  padding-top: 40px;
  padding-bottom: 40px;

}

.bibliographytext{
  justify-content: left; 
  
  text-align: left;
  color:navy;
  padding-bottom:15px;

}


.wrapper p {
  column-count: 2;
  column-gap: 50px;
  padding: 50px;
}

p {
  line-height: 1.6; 
  font-family: Helvetica;
  margin: 0;
  font-size: 14px;
}

.star {
  float: left;
  width: 125px;
  shape-outside: url(gatsby.jpeg);
  shape-margin:20px;
  margin-right: 20px;
  margin-bottom: 20px;
}



.right {
	text-align:left;
	overflow-x: hidden;
}
hr {
	display: block;
	width: 100%;
	
}
hr:after {
	content: "";
  display: table;
  clear: both;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

<div class="container">
    <h1 style="font-family: Brush Script MT; font-size:75px; color:#DCDCDC;cursor: default;" class="center">The Great Gatsby</h1>
</div>




  <div class="particlesdiv2" id="particles-js"></div>
   

<script> particlesJS("particles-js", {"particles":{"number":{"value":80,"density":{"enable":true,"value_area":800}},"color":{"value":"#ffffff"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.5,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":true,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":6,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"repulse"},"onclick":{"enable":true,"mode":"push"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":40,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});var count_particles, stats, update; stats = new Stats; stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild(stats.domElement); count_particles = document.querySelector('.js-count-particles'); update = function() { stats.begin(); stats.end(); if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) { count_particles.innerText = window.pJSDom[0].pJS.particles.array.length; } requestAnimationFrame(update); }; requestAnimationFrame(update);;
</script>

 


<div id="bibliography" class="bibliography container">
<h2>A Little About Gatsby</h2>
<h3><i>Bibliography</i>
</div>

<div class="wrapper bibliographytext container">

  


  <p class="wow slideInRight" data-wow-duration="2s" data-wow-delay="1s">
  <img src="gatsby.jpeg" alt="" class="star wow slideInRight" data-wow-duration="2s">
  Lorem ipsum dolor sit amet, his qualisque maluisset evertitur ei, rebum erant antiopam vel id. Etiam sonet ex nam, vis dicam invenire ne. An mei vitae aliquid assentior, at mei vide praesent. In lobortis tractatos argumentum qui, eu vivendo evertitur nam. Eu legendos gubergren mea, ea suas utinam libris mel.</p>



<hr>
</div>

<div class="right wrapper container">
  
	<p><img src="gatsby.jpeg" alt="" class="star wow slideInRight" data-wow-duration="2s"> Lorem ipsum dolor sit amet, his qualisque maluisset evertitur ei, rebum erant antiopam vel id. Etiam sonet ex nam, vis dicam invenire ne. An mei vitae aliquid assentior, at mei vide praesent. In lobortis tractatos argumentum qui, eu vivendo evertitur nam. Eu legendos gubergren mea, ea suas utinam libris mel.</p>

  <hr>

</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题