html - 卡在照片网格对齐上

标签 html css grid photo

无法对齐我的菜单和图像网格。我的网格是内联 block ，无论我做什么，我都无法让第一个元素移出右上角，除非我更改边距，这会降低我的导航菜单。此外，当我在本地测试我的页面时，功能明智地按我想要的方式运行，但是当我上传到我的网络主机时，它会切断照片并且不允许我滚动。

body{
  background-image: url(https://www.walldevil.com/wallpapers/a77/aincrad-sword-art-online.jpg);
  background-repeat: no-repeat;
  overflow: scroll;
  text-align: center;
  background-size: auto;
  scroll-behavior: smooth;
  max-width: 100% auto;
  max-height: 300% auto;

}

#container {
	width: 1500px;
	overflow: hidden;
	margin: auto;
	background: white;
}
header {
	width: 800px;
	margin: 40px auto;
}


.photobanner {
	height: 205px;
	width: 4000px;
	margin-bottom: 80px;
}

.first {
	-webkit-animation: bannermove 30s linear infinite;
	   -moz-animation: bannermove 30s linear infinite;
	    -ms-animation: bannermove 30s linear infinite;
	     -o-animation: bannermove 30s linear infinite;
	        animation: bannermove 30s linear infinite;
}

@keyframes "bannermove" {
 0% {
    margin-left: 0px;
 }
 100% {
    margin-left: -5150px;
 }

}

@-moz-keyframes bannermove {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -5150px;
 }

}

@-webkit-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -5150px;
 }

}

@-ms-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -5150px;
 }

}

@-o-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -5150px;
 }

}

@-moz-keyframes bannermove {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -5150px;
 }

 }

 @-moz-keyframes bannermove {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -5150px;
  }

}

@-moz-keyframes bannermove {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -5150px;
 }

 }

 @-moz-keyframes bannermove {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -5150px;
  }

}

@-moz-keyframes bannermove {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -5150px;
 }

 }

 @-moz-keyframes bannermove {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -5150px;
  }

}

@-moz-keyframes bannermove {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -5150px;
 }

 }


 p1{
 font-size: 36px;
 font-style: italic;
 font-weight: bold;
 font-family: fantasy;
 text-align: center;
 float: left;
 font-family: sans-serif;
 font-style: oblique;
}

 #nav {
 width:85%;
 margin:0 auto;
 list-style:none;
 }
 #nav li {
 float:left;
 }
 #nav a {
 display:block;
 text-align:center;
 width:100px;
 text-decoration:none;
 }


 ul li{
 float: left;
 list-style: none;
 margin-right:  1em
 padding: 12px;
 font-family: "indie Flower";
 text-align: center;
 }

 .clearfix:after {
     display:block;
     clear:both;
 }

 /*----- Menu Outline -----*/
 .menu-wrap {
     width:100%;
     box-shadow:0px 1px 3px blue;
     background:clear;
 }

 .menu {
     width:1000px;
     margin:0px auto;
 }

 .menu li {
     margin:0px;
     list-style:none;
     font-family:'Indie Flower';
 }

 .menu a {
     transition:all linear 0.15s;
     color:black;
     background-color: clear;
 }

 .menu li:hover > a, .menu .current-item > a {
     text-decoration:none;
     color:yellow;
 }

 .menu .arrow {
     font-size:11px;
     line-height:0%;
 }

 /*----- Top Level -----*/
 .menu > ul > li {
     float:left;
     display:inline-block;
     position:relative;
     font-size:19px;
 }

 .menu > ul > li > a {
     padding:10px 40px;
     display:inline-block;
     text-shadow:0px 1px 0px rgba(0,0,0,0.4);
 }

 .menu > ul > li:hover > a, .menu > ul > .current-item > a {
     background:clear;
 }

 /*----- Bottom Level -----*/
 .menu li:hover .sub-menu {
     z-index:1;
     opacity:1;
 }

 .sub-menu {
     width:160%;
     padding:5px 0px;
     position:absolute;
     top:100%;
     left:0px;
     z-index:-1;
     opacity:0;
     transition:opacity linear 0.15s;
     box-shadow:0px 2px 3px rgba(0,0,0,0.2);
     background:white;
 }

 .sub-menu li {
     display:block;
     font-size:16px;
 }

 .sub-menu li a {
     padding:10px 30px;
     display:block;
 }

 .sub-menu li a:hover, .sub-menu .current-item a {
     background:#3e3436;
 }

.photolink iframe:hover{
  float: left;

}

ul.products li {
    width: 200px;
    display: inline-block;
    vertical-align: middle;
    *display: inline;
    *zoom: 1;
}
<!DOCTYPE html>
<html>
<title>Anime Emporium:SAO Figurines</title>

<head>
  <link href='https://fonts.googleapis.com/css?family=Indie Flower' rel='stylesheet'>
<meta charset=utf-8/>
<meta name="description" content="description">

<div id="container">


    <div class="photobanner">
    	<img class="first" src="https://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=73268775" alt="Naruto" height="300px"/>
    	<img src="http://img13.deviantart.net/6333/i/2010/135/a/b/bleach_logo_by_pein87.jpg" alt="Bleach" class="bleach" height="300px"/>
    	<img src="http://www.onepiecepodcast.com/wp-content/uploads/2015/11/OP-anime-key-810x304.png" alt="OnePiece" class="1piece" height="300px"/>
    	<img src="https://ibhuluimcom-a.akamaihd.net/ib.huluim.com/show/1303?region=US&size=952x536" alt="Deathnote" class="death" height="300px"/>
    	<img src="http://i0.kym-cdn.com/photos/images/original/000/951/672/5c4.jpg" alt="FateStay" class="fate" height="300px"/>
    	<img src="https://i.ytimg.com/vi/COYFmbVEH0k/maxresdefault.jpg" alt="SwordArtOnline" class="SAO" height="300px"/>
    	<img src="https://myanimelist.cdn-dena.com/images/anime/13/75194.jpg" alt="DGreyMan" class="banner"height="300px"/>
    	<img src="http://www.fandompost.com/wp-content/uploads/2011/05/Viz-Media-Logo.jpg" alt="Viz"class="banner" height="300px"/>
    	<img src="https://www.kamispeed.com/v/vspfiles/photos/manufacturers/NERV.jpg" alt="Nerv"class="banner"  height="300px" />

    </div>

    <div class='fixedDiv'>
      <br class='clear'>
</div>
</div>

<link rel="stylesheet" media="screen" href="SAOFigurines.css"/>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<h1>Sword Art Online</h1>


  <div class="menu-wrap">
      <nav class="menu">
          <ul class="clearfix">
              <li><a href="/index.html">Home</a></li>
              <li><a href="#">Videos</a></li>
              <li> <a href="/FigurinesMain.html">Figurines</a></li>
              <li><a href="/AEClothingMain.html">Clothing</a></li>
              <li><a href="MiscMainMenu.html">Misc</a></li>
              
          </ul>
      </nav>
  </div>

</head>

<body>
<div class="buttons">
  <ul class="products">
    <li>
      <a href="#">
        <img src="#">
      </a>
    </li>

      <li>
          <a href="#">
              <img src="SAO Asuna Yui.jpg">
              <h4>Asuna/Yui Bench</h4>
              <p>$45.99</p>
          </a>
      </li>
      <li>
          <a href="#">
              <img src="SAO Asuna ALO.jpg">
              <h4>Asuna Alfheim Online</h4>
              <p>$25.99</p>
          </a>
      </li><!-- more list items -->
      <li>
        <a href="#">
          <img src="SAO Asuna (Lightning).jpg">
          <h4>Asuna "Lightnong Flash" costume</h4>
          <p>$25.99</p>
        </a>
      </li>

  </ul>

我希望照片网格在导航菜单下是单行。

最佳答案

您需要重构您的 HTML。 “照片网格”应该在 HTML 中的 nav 下方(而不是在 head 部分)...这可能会帮助您入门...

body {
  background-image: url(https://www.walldevil.com/wallpapers/a77/aincrad-sword-art-online.jpg);
  background-repeat: no-repeat;
  overflow: scroll;
  text-align: center;
  background-size: auto;
  scroll-behavior: smooth;
  max-width: 100% auto;
  max-height: 300% auto;
}

#container {
  width: 1500px;
  overflow: hidden;
  margin: auto;
  background: white;
}

header {
  width: 800px;
  margin: 40px auto;
}

.photobanner {
  height: 205px;
  width: 4000px;
  margin-bottom: 80px;
}

.first {
  -webkit-animation: bannermove 30s linear infinite;
  -moz-animation: bannermove 30s linear infinite;
  -ms-animation: bannermove 30s linear infinite;
  -o-animation: bannermove 30s linear infinite;
  animation: bannermove 30s linear infinite;
}

@keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -5150px;
  }
}

@-moz-keyframes bannermove {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -5150px;
  }
}

@-webkit-keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -5150px;
  }
}

@-ms-keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -5150px;
  }
}

@-o-keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -5150px;
  }
}

@-moz-keyframes bannermove {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -5150px;
  }
}

@-moz-keyframes bannermove {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -5150px;
  }
}

@-moz-keyframes bannermove {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -5150px;
  }
}

@-moz-keyframes bannermove {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -5150px;
  }
}

@-moz-keyframes bannermove {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -5150px;
  }
}

@-moz-keyframes bannermove {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -5150px;
  }
}

@-moz-keyframes bannermove {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -5150px;
  }
}

p1 {
  font-size: 36px;
  font-style: italic;
  font-weight: bold;
  font-family: fantasy;
  text-align: center;
  float: left;
  font-family: sans-serif;
  font-style: oblique;
}

#nav {
  width: 85%;
  margin: 0 auto;
  list-style: none;
}

#nav li {
  float: left;
}

#nav a {
  display: block;
  text-align: center;
  width: 100px;
  text-decoration: none;
}

ul li {
  float: left;
  list-style: none;
  margin-right: 1em padding: 12px;
  font-family: "indie Flower";
  text-align: center;
}

.clearfix:after {
  display: block;
  clear: both;
}


/*----- Menu Outline -----*/

.menu-wrap {
  width: 100%;
  box-shadow: 0px 1px 3px blue;
  background: clear;
}

.menu {
  width: 1000px;
  margin: 0px auto;
}

.menu li {
  margin: 0px;
  list-style: none;
  font-family: 'Indie Flower';
}

.menu a {
  transition: all linear 0.15s;
  color: black;
  background-color: clear;
}

.menu li:hover>a,
.menu .current-item>a {
  text-decoration: none;
  color: yellow;
}

.menu .arrow {
  font-size: 11px;
  line-height: 0%;
}


/*----- Top Level -----*/

.menu>ul>li {
  float: left;
  display: inline-block;
  position: relative;
  font-size: 19px;
}

.menu>ul>li>a {
  padding: 10px 40px;
  display: inline-block;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}

.menu>ul>li:hover>a,
.menu>ul>.current-item>a {
  background: clear;
}


/*----- Bottom Level -----*/

.menu li:hover .sub-menu {
  z-index: 1;
  opacity: 1;
}

.sub-menu {
  width: 160%;
  padding: 5px 0px;
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: -1;
  opacity: 0;
  transition: opacity linear 0.15s;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
  background: white;
}

.sub-menu li {
  display: block;
  font-size: 16px;
}

.sub-menu li a {
  padding: 10px 30px;
  display: block;
}

.sub-menu li a:hover,
.sub-menu .current-item a {
  background: #3e3436;
}

.photolink iframe:hover {
  float: left;
}

ul.products li {
  width: 200px;
  display: inline-block;
  vertical-align: middle;
  *display: inline;
  *zoom: 1;
}
<h1>Sword Art Online</h1>


<div class="menu-wrap">
  <nav class="menu">
    <ul class="clearfix">
      <li><a href="/index.html">Home</a></li>
      <li><a href="#">Videos</a></li>
      <li> <a href="/FigurinesMain.html">Figurines</a></li>
      <li><a href="/AEClothingMain.html">Clothing</a></li>
      <li><a href="MiscMainMenu.html">Misc</a></li>

    </ul>
  </nav>
</div>

<div id="container">
  <div class="photobanner">
    <img class="first" src="https://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=73268775" alt="Naruto" height="300px" />
    <img src="http://img13.deviantart.net/6333/i/2010/135/a/b/bleach_logo_by_pein87.jpg" alt="Bleach" class="bleach" height="300px" />
    <img src="http://www.onepiecepodcast.com/wp-content/uploads/2015/11/OP-anime-key-810x304.png" alt="OnePiece" class="1piece" height="300px" />
    <img src="https://ibhuluimcom-a.akamaihd.net/ib.huluim.com/show/1303?region=US&size=952x536" alt="Deathnote" class="death" height="300px" />
    <img src="http://i0.kym-cdn.com/photos/images/original/000/951/672/5c4.jpg" alt="FateStay" class="fate" height="300px" />
    <img src="https://i.ytimg.com/vi/COYFmbVEH0k/maxresdefault.jpg" alt="SwordArtOnline" class="SAO" height="300px" />
    <img src="https://myanimelist.cdn-dena.com/images/anime/13/75194.jpg" alt="DGreyMan" class="banner" height="300px" />
    <img src="http://www.fandompost.com/wp-content/uploads/2011/05/Viz-Media-Logo.jpg" alt="Viz" class="banner" height="300px" />
    <img src="https://www.kamispeed.com/v/vspfiles/photos/manufacturers/NERV.jpg" alt="Nerv" class="banner" height="300px" />

  </div>

  <div class='fixedDiv'>
    <br class='clear'>
  </div>
</div>

  <div class="buttons">
    <ul class="products">
      <li>
        <a href="#">
          <img src="#">
        </a>
      </li>

      <li>
        <a href="#">
          <img src="SAO Asuna Yui.jpg">
          <h4>Asuna/Yui Bench</h4>
          <p>$45.99</p>
        </a>
      </li>
      <li>
        <a href="#">
          <img src="SAO Asuna ALO.jpg">
          <h4>Asuna Alfheim Online</h4>
          <p>$25.99</p>
        </a>
      </li>
      <!-- more list items -->
      <li>
        <a href="#">
          <img src="SAO Asuna (Lightning).jpg">
          <h4>Asuna "Lightnong Flash" costume</h4>
          <p>$25.99</p>
        </a>
      </li>

    </ul>

关于html - 卡在照片网格对齐上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45192201/

上一篇：html - 如何使 div 的位置固定，以便在调整大小时它们不会改变？

下一篇：html - 浏览器无法识别 &lt;![CDATA[----]]> 中的内容

相关文章：

html - 如果一个框高于其他框，如何使用 display flex 换行并删除空格

html - 如何在photoshop图片中获得相同的字体效果

javascript - 使用 javascript 隐藏/显示 HTML 表单(按下按钮时)

html - 如何使用 CSS3 Transition 使图像独立于周围的元素移动？

java - 内部类中有变量

javascript - 使用 jQuery 隐藏父 div

jquery - 使用 jQuery CSS 更改 Botframework 中的自适应卡片

javascript - 如何使用 html 和 javascript 中的输入更改连接多个 id 以更改颜色

grid - Bootstrap 3 使用 SASS mixin 更改特定容器上的网格列数和装订线宽度

opengl-es - 如何在 OpenGL ES 2.0 中创建彩色方形网格？

©2024 IT工具网  联系我们