文章/答案/技术大牛

发布

社区首页 >问答首页 >试着做一个css3 3的画廊。不幸地失败

问试着做一个css3 3的画廊。不幸地失败
EN

Stack Overflow用户

提问于 2015-03-13 08:30:02

回答 1查看 47关注 0票数 1

我试着用css3从零开始制作一个图片库.这是我到目前为止所拥有的。

这是我的三大问题专辑。

最大的问题是，我使用的位置:相对，以便我可以对齐图像标题的底部。这是导致我的图像重新定位，一旦一个图像被点击。
第一幅图像的边缘大约是5个像素。我使用Chrome的检查元素工具进行了检查，没有理由这样做。
在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

html

css

gallery

pseudo-class

回答 1

Stack Overflow用户

发布于 2015-03-13 10:59:18

问题

头与第一个图之间的奇异边距当您使用inline-block而不添加浮点方向时，似乎会出现这种情况。 Fix：float:left;

图像长或长图像 这是由您设置的原因:您的数字为30%，并将儿童img的高度100%。这意味着在那里，图像被强制以所有的方式充满，并且您将宽度设置为auto。这会导致长图像。我的建议是简单地设置一个较小的固定高度，以便显示更多的图像宽度。我使用了90 on，因为它使用了视口测量，它在移动设备上具有良好的伸缩性。

当我单击“图像”()时，图像移动到了无序状态。首先是不错的黑客攻击。:focus现在并不是真正的点击，对吗？聚焦元素是选择当前元素的内容。在选择它的方法上，点击一下。现在，由于您在元素和位置绝对值上使用位置相对，元素将不会占用任何空间，因为这就是位置绝对值所做的。；博士：. 我添加了一个fig-container类的div，该类相对定位，具有与图形相同的高度和宽度。并在:focus上添加了一个不同的效果，我将绝对定位元素(图)设置为顶部50%，左上角50%，使图形的左上角都位于视图的中心。并增加了一个转换转换为-50% x和-50% y transform: transition(-50%, -50%);，这将把它移动到自己的中心。换句话说:把这一要素放在中心。

我要你为我编码：

好的，这是码页

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29027774

复制

相似问题

问试着做一个css3 3的画廊。不幸地失败
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问试着做一个css3 3的画廊。不幸地失败EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问试着做一个css3 3的画廊。不幸地失败
EN