Question

我正在尝试仅使用css3从头创建一个图库......而这就是我到目前为止所拥有的。

Here's an imgur album of my main three problems.

最大的问题是我使用的是position：relative，这样我就可以将图片标题对齐到底部。这会导致我的图像在单击图像后重新定位。
第一张图像的边距为5像素。我使用Chrome的Inspect Element工具检查了它，没有理由这样做。
在codepen（和此处）中，图像超长。我怀疑这不是一个真正的问题，但与我的截图相比，它看起来有点不稳定。

我在safari和chrome中测试过，这些问题在两个浏览器中都存在（第3号除外）。这是我正在进行的代码：

body {
  background: #eee;
  font: 400 14px/20px'PT Serif', serif;
  color: #2b2e2e;
  margin: 0;
  padding: 0;
}
article {
  width: 80%;
  margin: 0 auto;
}
nav,
img,
header,
figure {
  display: inline-block;
  margin: 0;
  padding: 0;
}
header {
  width: 30%;
  margin-right: 3%;
}
nav ul li {
  font: 12px/16px normal'Raleway', sans-serif;
  letter-spacing: 2px;
  display: block;
  margin: 2px 0;
  vertical-align: top;
}
date {
  border-bottom: 2px solid #000;
  border-top: 2px solid #000;
  display: block;
  font-size: 12px;
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
}
h1 {
  font: 700 36px/40px'PT Sans Narrow', sans-serif;
  text-transform: uppercase;
  padding: 0 1em;
}
header {
  background: #fff;
  height: 80%;
  margin-bottom: 3%;
}
p {
  margin: 16px 0 20px 0;
}
ul,
ol {
  margin-bottom: 20px;
}
div {
  margin: 0;
  padding: 0;
  display: inline-block;
}
img {
  width: auto;
  height: 200%;
  margin: 0 auto;
}
figure {
  vertical-align: top;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  width: 30%;
  height: 30%;
  margin: 0 3% 3% 0;
}
figcaption {
  background: #fff;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: .25em 1em;
}
figure:first-of-type {
  width: 63%;
  height: 80%;
  margin-bottom: 3%;
}
figure:focus {
  width: 80%;
  height: 80%;
  transition: all 1s ease-out .5ms;
  -webkit-transition: all 1s ease-out .5ms;
  -moz-transition: all 1s ease-out .5ms;
  -o-transition: all 1s ease-out .5ms;
  position: absolute;
  top: 0;
  left: 10%;
  text-align: center;
  z-index: 1000;
  outline: none;
}

<html>

<head>
  <title>Sample Article</title>
  <link href='http://fonts.googleapis.com/css?family=Raleway:600' rel='stylesheet' type='text/css'>

</head>

<body>

  <article>
    <header>
      <nav>
        <ul>

          <li><a href="">Top</a>
            <ul>
              <li>Sub</li>
            </ul>
          </li>
          <li><a href="">Menu</a>
            <ul>
              <li>Links</li>
              <li>Go</li>
              <li>Here</li>
            </ul>
          </li>
          <li><a href="">Links</a>
            <ul>
              <li>And</li>
              <li>Here</li>
            </ul>
          </li>

        </ul>

      </nav>

      <h1>Example Article Title</h1>
    </header>
    <figure tabindex=1>

      <img src="http://i.imgur.com/JdRTuQB.jpg" />
      <figcaption>Text goes here. Obviously there'll be more. Like this.</figcaption>

    </figure>
    <figure tabindex=2>

      <img src="http://i.imgur.com/4PkhPlq.jpg" />
      <figcaption>Text goes here too</figcaption>

    </figure>
    <figure tabindex=3>

      <img src="http://i.imgur.com/kTcyEOe.jpg" />
      <figcaption>Some more captions</figcaption>

    </figure>
    <figure tabindex=4>

      <img src="http://i.imgur.com/mIeUOYX.jpg" />
      <figcaption>Almost done! Hehehe</figcaption>

    </figure>

  </article>
</body>

</html>

http://codepen.io/anon/pen/EadOyL?editors=110

Answer 1

问题

标题和第一个数字之间的奇怪边距
当您使用inline-block并且不添加浮动方向时，似乎会出现这种情况。<修复：float:left;

图像长图像或长图像
这是由于您将图形设置为30％并将子图像img设置为高度100％。
这意味着存在图像被强制为所有方式已满，并将宽度设置为自动。这导致长图像。我的建议是简单地设置一个较小的固定高度，以便显示更多的图像宽度。我使用了90vh，因为它使用视口测量，它在移动设备上可以很好地扩展

单击图像时图像乱序乱序
首先好看的黑客。现在:focus不是真正的点击吗？聚焦元素是当前元素的选择。选择它的方法是点击。既然你在元素和位置上使用了正位数，那么元素就不会占用任何空间，因为那是绝对的位置。
tl; dr ：... ...我添加了一个div类fig-container，它相对定位并且与图形具有相同的高度和宽度。并且在:focus上添加了一个不同的效果我设置了绝对定位元素（图），顶部为50％，左边为50％，使得图的左上角全部位于视口的中心。并添加了-50％x和-50％y transform: transition(-50%, -50%);的变换转换，这会将其移动到自身的中心。换句话说：中心那个元素。

我想为你代码：
这里很好的是 codepen

试图制作一个仅限css3的画廊。失败了

1 个答案: