css Bildabstand rechts

Question

Ich versuche, einen "Polaroid" -Bild-Effekt nach rechts zu schaffen, kann aber nicht herausfinden, wie man zwei Dinge macht.

1. Ich möchte einige Whitespace "um" das Schlagschatten/Polaroid-Bild, das ich erstellt habe, und Text fließen um es herum.
2. Ich möchte sie übereinander legen. Das heißt, zuerst ein Bild, dann ein zweites Bild nach dem anderen (so sieht es aus, als ob ein Bild über einem anderen Bild sitzt, aber nur teilweise).

Irgendwelche Hinweise, wie man das macht?

Bilder sollten auf der "rechten" Seite erscheinen - aber mit einem Rand von etwa 50px (Leerzeichen). (Ich will einen Textblock, den ich eintippe - und die Bilder erscheinen am oberen Rand der Seite, aber ganz rechts, übereinander gestapelt, mit 50px Leerraum, so dass der Text nicht " berühren“das gedrehte Bild.

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> 

Hier ist die CSS ich bin derzeit mit.

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

ich einige Ihrer Inline-Styles und CSS gereinigt. pOLAROID Container verwendet jetzt Absolute Positionierung zum Ausrichten nach rechts, damit Ihre Fotos in der von Ihnen beschriebenen Weise gestapelt werden können. Kannst du erklären, was du mit 50px Leerzeichen um den Text herum meinst?

Hier ist ein Codepen Beispiel: 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; 
}