如何将flex包装应用于此django模板

时间：2016-01-18 09:29:05

标签： css html5 django-templates flexbox

我正在询问如何将flex-wrap应用于模板中的图片，以便它们在整个页面中均匀分布，而不是像当前情况那样在列状结构中。

我希望第二个模板（蓝色背景）中的图像与白色背景中的图像对齐。我在问题中提供的代码创建了第二个模板。

enter image description here

enter image description here

以下是模板代码：

<DOCTYPE = html>
<html lang ="en">
<header>
{% block sidebar %}
<ul class = "sidebar">
<li><a href ="/article/all">Articles</a></li>
<li><a href ="/article/create">Create Article</a></li>
</ul>
{% endblock %}
</header>

<body>

<style>
body{
display:flex;
justify-content:space-around;
text-align: center;
background-color: lightblue;

}

.page{
display:flex;
flex-wrap:wrap;
align-content:space-between;
width:400px;
text-align: center;
margin:10px auto 20px auto;
background-color: rgba(47,47,47,0.98);
font-color:white;
border-radius: 16px;
}

.sidebar{
display:flex;
justify-content:space-around;
flex-direction:column;
float:left;
width:200px;
border:1px solid #000;
}

.pic{
display:flex;
flex-wrap:wrap;
/*justify-content:space-around;*/
/*align-content:space-between;*/
}

</style>


{% block content %}

<h2>Language is:{{language}}</h2>
enter code here
<h2> Session Language is:{{session_language}}</h2>

{% if articles.count > 0 %}

{% for article in articles %}
<div class = "page">
<h2><a href ='/article/get/{{article.id}}/'>{{article.title}}</a></h2>
</div>


<div class ="pic">
{% if article.thumbnail %}
<p><img class ="pic" img src = "/static/{{article.thumbnail}}/" width =    "               "200"/></p>
{% endif %}
</div>


<p>{{article.bod|lower|truncatewords:"10"}}</p>
</div>

{% endfor %}
{% endif %}

<p>End Of Page</p>

{% endblock %}

</body>
</html>

VIEWS.PY 

from django.shortcuts import render_to_response
from article.models import Article
from django.http import HttpResponse
from forms import ArticleForm
from django.http import HttpResponseRedirect
from django.core.context_processors import csrf

def articles(request):


language = 'en-gb'
session_language = 'en-gb'

if  'lang' in request.COOKIES:
language = request.COOKIES['lang']

if  'lang' in request.session:
session_language = request.session['lang']


return render_to_response('articles.html',
                                                    {'articles' :Article.objects.all(),
                                                    'language': language,
                                                    'session_language': session_language})

def article(request, article_id = 1):

return render_to_response ('article.html',
                                                     {'article': Article.objects.get(id = article_id)})



def language(request, language = 'en-gb'):

response = HttpResponse("setting language to %s" % language)

response.set_cookie("lang", language)

request.session["lang"] = language

return response

def create(request):

if request.POST:

form = ArticleForm(request.POST, request.FILES)

if form.is_valid():

form.save()

return HttpResponseRedirect("/article/all")

else:
form = ArticleForm()

args = {}
args.update(csrf(request))

args["form"] = form

return render_to_response("Create_Article.html",args)

def like_article(request, article_id):

if article_id:
a = Article.objects.get(id = article_id)
count = a.likes
count += 1
a.likes = count
a.save()
return HttpResponseRedirect('/article/get/%s' % article_id)

URLS.PY 

from django.conf.urls import patterns, include, url
from django.contrib import admin
from django.views.debug import default_urlconf
from . import views
admin.autodiscover()

urlpatterns = [

url(r'^all/$', 'article.views.articles', name = 'articles'),
url(r'^create/$', 'article.views.create', name = 'create'),
url(r'^language/(?P<language>[a-z\-]+)/$', 'article.views.language', name = 'language'),
url(r'^get/(?P<article_id>\d+)/$', 'article.views.article', name = 'article'),
url(r'^like/(?P<article_id>\d+)/$','article.views.like_article'),
   #(r'^$', default_urlconf),

MODELS.PY 

from django.db import models
from time import time


def get_upload_file_name(instance, filename):
return "uploaded_files/%s_%s" % (str(time()).replace(' . ', '_') , filename)


"Create your models here"

class Article(models.Model):

title = models.CharField(max_length = 200)
body = models.TextField()
pub_date = models.DateTimeField("date published")
likes = models.IntegerField(default = 0)
thumbnail = models.FileField(upload_to = get_upload_file_name)

def __unicode__(self):
return self.title

class Comment(models.Model):

name = models.CharField(max_length = 200)
body = models.TextField()
pub_date = models.DateTimeField("date published")
article = models.ForeignKey(Article)

FORMS.PY 

from django import forms
from models import Article, Comment

class ArticleForm(forms.ModelForm):

class Meta:
model = Article
fields = ("title", "body", "pub_date" ,"thumbnail")

class CommentForm(forms.ModelForm):

class Meta:
model = Comment
fields = ("name","body","pub_date")

SETTINGS.PY 

import os
BASE_DIR = os.path.dirname(os.path.dirname(__file__))

DEBUG = True

TEMPLATE_DEBUG = True

ALLOWED_HOSTS = []


INSTALLED_APPS = (

'django.contrib.admin',
'django.contrib.auth',
#'django.contrib.auth.middleware.AuthenticationMiddleware'
#'django.contrib.messages.middleware.MessageMiddleware'
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'article',
)

MIDDLEWARE_CLASSES = (

'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
#'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
)

ROOT_URLCONF = 'brn.urls'

WSGI_APPLICATION = 'brn.wsgi.application'

DATABASES = {

'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': 'C:/Users/BRIN/Bitnami Django Stack projects/brn/brn/goblin.db',
}
}

EXAMPLE_DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}


STATIC_URL = '/static/'

MEDIA_ROOT = "C:/Users/BRIN/Bitnami Django Stack projects/brn/static/"

MEDIA_URL  = '/media/'


TEMPLATE_DIRS = "C:/Users/BRIN/Bitnami Django Stack projects/brn/static/html/",

STATIC_URL = '/static/html/'

STATICFILES_DIRS =(

"C:/Users/BRIN/Bitnami Django Stack projects/brn/static/html/",
)

'STATICFILES_FINDERS = ( 

'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
#'django.contrib.staticfiles.finders.DefaultStorageFinder',
)

TEMPLATE_LOADERS = (

'django.template.loaders.filesystem.Loader',
'django.template.loaders.app_directories.Loader',
'django.template.loaders.eggs.Loader',
)

0 个答案:

没有答案
相关问题
最新问题