Я знаю, что это старо, но я хотел бы предложить использовать линейный градиент для достижения того же эффекта вместо смещения поля. Это будет поддерживать любой контент в его первоначальном месте.
HTML
CSS
/* reset */
ul, li, a {
margin: 0; padding: 0;
}
/* nav stuff */
ul, li, a {
display: inline-block;
text-align: center;
}
/* appearance styling */
ul {
/* hacks to make one side slant only */
overflow: hidden;
background: linear-gradient(to right, red, white, white, red);
}
li {
background-color: red;
transform:skewX(-20deg);
-ms-transform:skewX(-20deg);
-webkit-transform:skewX(-20deg);
}
li a {
padding: 3px 6px 3px 6px;
color: #ffffff;
text-decoration: none;
width: 80px;
transform:skewX(20deg);
-ms-transform:skewX(20deg);
-webkit-transform:skewX(20deg);
}
Используйте:
{% for photos in gallery.photo_set|slice:":3" %}
Это лучше сделать в коллекции gallery.photo_set
. Жестко запрограммированная цифра «3» в шаблоне - плохая идея в долгосрочной перспективе.
class Gallery( object ):
def photo_subset( self ):
return Photo.objects.filter( gallery_id = self.id )[:3]
В функции просмотра вы можете делать такие вещи, как выбор 3 случайных фотографий или 3 самых последних фотографий.
def photo_recent( self ):
return Photo.objects.filter( gallery_id = self.id ).orderby( someDate )[:3]
def photo_random( self ):
pix = Photo.objects.filter( gallery_id = self.id ).all()
random.shuffle(pix)
return pix[:3]