Skip to content

Instantly share code, notes, and snippets.

@pafnuty

pafnuty/for_rashpil.html

Created January 16, 2013 18:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pafnuty/4549351 to your computer and use it in GitHub Desktop.
Save pafnuty/4549351 to your computer and use it in GitHub Desktop.
Download ZIP
Пример с картинками
Raw
for_rashpil.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html {
background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/gray_jean.png) repeat;
font: normal 14px/1.2 Arial, sans-serif;
text-shadow: 0 1px 0 #fff;
}
body {
width: 780px;
margin: 0 auto;
}
a {
color: #fe3e64;
text-decoration: none;
display: inline-block;
padding: 0 3px;
}
a:hover {
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
background: #fe3e64;
}
.related-wrapper {
margin-left: -20px;
}
.related-item {
width: 100px;
padding: 5px;
margin: 10px 0 10px 20px;
float: left;
}
.related-item img {
}
.clearfix:before,
.clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
.clr {clear: both; height: 0; overflow: hidden;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('.related-item:nth-child(6n)').after('<div class="clr" />');
});
</script>
</head>
<body>
<div class="related-wrapper clearfix">
<div class="related-item"><img src="http://lorempixel.com/100/131" alt=""><a href="#">Ullam voluptatum reprehenderit dicta ipsam.</a></div>
<div class="related-item"><img src="http://lorempixel.com/100/132" alt=""><a href="#">Nobis consectetur hic molestias repudiandae?</a></div>
<div class="related-item"><img src="http://lorempixel.com/100/115" alt=""><a href="#">Voluptas vel pariatur quod quos!</a></div>
<div class="related-item"><img src="http://lorempixel.com/100/124" alt=""><a href="#">Laboriosam deleniti est voluptates rem!</a></div>
<div class="related-item"><img src="http://lorempixel.com/100/116" alt=""><a href="#">Odit ratione dolorem officiis facere.</a></div>
<div class="related-item"><img src="http://lorempixel.com/100/117" alt=""><a href="#">Doloribus nihil provident corporis itaque?</a></div>
<div class="related-item"><img src="http://lorempixel.com/100/118" alt=""><a href="#">Odit natus dignissimos quia distinctio.</a></div>
<div class="related-item"><img src="http://lorempixel.com/100/119" alt=""><a href="#">Voluptatum obcaecati ducimus ipsam doloremque.</a></div>
<div class="related-item"><img src="http://lorempixel.com/100/134" alt=""><a href="#">Id temporibus harum explicabo dolores.</a></div>
<div class="related-item"><img src="http://lorempixel.com/100/135" alt=""><a href="#">Magnam aspernatur eum rem quas!</a></div>
<div class="related-item"><img src="http://lorempixel.com/100/136" alt=""><a href="#">Nihil explicabo cumque doloribus totam.</a></div>
<div class="related-item"><img src="http://lorempixel.com/100/113" alt=""><a href="#">Ad similique quibusdam eligendi perspiciatis!</a></div>
<div class="related-item"><img src="http://lorempixel.com/100/114" alt=""><a href="#">Cum eligendi sunt harum sequi.</a></div>
<div class="related-item"><img src="http://lorempixel.com/100/128" alt=""><a href="#">Quod qui in voluptatem perspiciatis!</a></div>
<div class="related-item"><img src="http://lorempixel.com/100/129" alt=""><a href="#">Maiores aspernatur quo dolorem eaque.</a></div>
<div class="related-item"><img src="http://lorempixel.com/100/130" alt=""><a href="#">Commodi velit saepe tempore minus.</a></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment