css 图像间距正确

Question

我正在尝试在右侧创建“宝丽来”图像效果，但不知道如何做两件事。

1. 我想要一些空白“围绕”我创建的投影/宝丽来图像，并在其周围显示文字。
2. 我想让它们在另一个之上。即第一张图片，然后是第二张图片（因此看起来一张图片位于另一张图片之上，但只是部分图片）。

有什么办法吗？

图像应出现在“右侧” - 但边距为 50 像素（空白）。 （即，我想要一堆我输入的文本 - 并且图像出现在页面的“顶部”，但在最右边，彼此堆叠，例如 50px 的空白，因此文本不会“触摸”旋转后的图像。

HTML

<div style="border:10px;border-style:solid">
    <div class="polaroid rotate_right" style="float:right;z-index:100;">
        <img src="sampleimage001" alt="">
        <center>Picture 001</center>
    </div>
    <div class="polaroid rotate_left" style="float:right;">
        <img src="sampleimage002" alt="">
        <center>Picture 002</center>
    </div>
</div>

这是我目前正在使用的 CSS。

div.polaroid {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    padding: 10px 10px 20px 10px;
    border: 1px solid #BFBFBF;
    background-color: white;
    box-shadow: 10px 10px 5px #aaaaaa;
}

div.rotate_right {
    float: left;
    -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Safari */
    transform: rotate(7deg);
}

div.rotate_left {
    float: left;
    -ms-transform: rotate(-8deg); /* IE 9 */
    -webkit-transform: rotate(-8deg); /* Safari */
    transform: rotate(-8deg);
}

Answer 1

我清理了您的一些内联样式和 CSS。宝丽来容器现在使用绝对定位来对齐，让您的照片以您描述的方式堆叠。您能解释一下文本周围需要 50 像素的空白是什么意思吗？

这是一个 Codepen 示例：http://codepen.io/stevenng/pen/GZbeXe

HTML：

  <div class="pic-container">
    <div class="polaroid rotate_right">
        <img src="http://lorempixel.com/200/200" alt="">
        <center>Picture 001, bunch of text</center>
    </div>
    <div class="polaroid rotate_left">
        <img src="http://lorempixel.com/200/200" alt="">
        <center>Picture 002</center>
    </div> </div>

CSS：

div.polaroid {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    padding: 10px 10px 20px 10px;
    border: 1px solid #BFBFBF;
    background-color: white;
    box-shadow: 10px 10px 5px #aaaaaa;
}

div.rotate_right {
    float: left;
    -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Safari */
    transform: rotate(7deg);
}

div.rotate_left {
    float: left;
    -ms-transform: rotate(-8deg); /* IE 9 */
    -webkit-transform: rotate(-8deg); /* Safari */
    transform: rotate(-8deg);
}

.pic-container {
  position: absolute;
  right: 0;
  max-width: 200px;
}