html5 - 我想要可以水平滚动的响应式图库。仅使用纯HTML5和CSS3

我设法做到了。

但是我需要在此图像库的末尾具有两个链接。

在屏幕中间的最后一个图像之后，我需要具有（下一个信息）链接。

请帮助，谢谢。

我不要任何JavaScript。我尝试了所有内容，但无法将文字变成想要的文字。

html, body{

  width:100%;
  height:100%;
  font-family: "minion-pro", serif !important;

}
#wrapper {

height: 100%;

}

html, body, ul, li{

  padding:0;
  margin:0;
  border:0;

  text-decoration:none;

}

ul{

  width:100%;
  height:100%; /* CHANGE */

  overflow-y:inherit;
  white-space: nowrap;
  line-height: 0;
  font-size: large;

}

ul li{

  display:inline;

  height:100%;

}

ul li{

  max-height:100%;
  height:100%; /* CHANGE */
  width:auto !important; /* CHANGE */

}

img{
  padding-top: 5%;
  padding-bottom: 5%;
  max-height:1000px;
  height:80%; /* CHANGE */
  width:auto !important; /* CHANGE */

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css.css">
<title></title>
</head>

<body>

<div id="wrapper">


<ul>
  <li>
    <img style="padding-right: 5%;" src="http://filipkartousek.com/new/Barum/01.jpg"/>
  </li>

  <li>
    <img style="padding-right: 5%;" src="http://filipkartousek.com/new/Barum/02.jpg"/>
  </li>
  <li>
    <img style="padding-right: 5%;" src="http://filipkartousek.com/new/Barum/03.jpg"/>
  </li>
  <li>
    <img style="padding-right: 5%;" src="http://filipkartousek.com/new/Barum/04.jpg"/>
  </li>
  <li>
    <img style="padding-right: 5%;" src="http://filipkartousek.com/new/Barum/05.jpg"/>
  </li>
  <li>
    <img style="padding-right: 5%;" src="http://filipkartousek.com/new/Barum/06.jpg"/>
  </li>
  <li>
    <img style="padding-right: 20%;" src="http://filipkartousek.com/new/Barum/07.jpg"/>
  </li>



 </ul>
 </div>


</body>

</html>

最佳答案

这是您的副本的末尾有链接。

我将ul / li更改为display: table / display: table-cell。

html, body{
  width:100%;
  height:100%;
  font-family: "minion-pro", serif !important;

}
#wrapper {
  height: 100%;
}

html, body, ul, li{
  padding:0;
  margin:0;
  border:0;
  text-decoration:none;
}

ul {
  display: table;
  width:100%;
  height:100%; /* CHANGE */
  overflow-y:inherit;
  font-size: large;
}

ul li{
  display: table-cell;
  vertical-align: middle;
  max-height: 100%;
  height: 100%; /* CHANGE */
  width:auto !important; /* CHANGE */
  white-space: nowrap;
  padding: 20px;
}

img {
  max-height:1000px;
  height:80vh; /* CHANGE */
  width:auto !important; /* CHANGE */
}

<div id="wrapper">

  <ul>

    <li>
      <img src="http://filipkartousek.com/new/Barum/01.jpg"/>
    </li>

    <li>
      <img src="http://filipkartousek.com/new/Barum/02.jpg"/>
    </li>
    <li>
      <img src="http://filipkartousek.com/new/Barum/03.jpg"/>
    </li>
    <li>
      <img src="http://filipkartousek.com/new/Barum/04.jpg"/>
    </li>
    <li>
      <img src="http://filipkartousek.com/new/Barum/05.jpg"/>
    </li>
    <li>
      <img src="http://filipkartousek.com/new/Barum/06.jpg"/>
    </li>
    <li>
      <img src="http://filipkartousek.com/new/Barum/07.jpg"/>
    </li>

    <li>
      <a href="">some link 1</a><br>
      <a href="">some link 2</a>

    </li>

  </ul>

</div>

关于html5 - 我想要可以水平滚动的响应式图库。仅使用纯HTML5和CSS3，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35466486/