Css 如何将flex wrap应用于此django模板
我想知道如何将Css 如何将flex wrap应用于此django模板,css,html,django-templates,flexbox,Css,Html,Django Templates,Flexbox,我想知道如何将flex wrap应用于模板中的图片，使它们均匀分布在整个页面中，而不是像当前情况下那样以列状结构分布 我希望第二个模板（蓝色背景）中的图像与白色背景中的图像对齐。我提供的问题代码创建了第二个模板 以下是模板代码： <DOCTYPE = html> <html lang ="en"> <header> {% block sidebar %} <ul class = "sidebar"> <li><a href =
flex wrap<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>
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),
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")
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',
)
您发布的代码不会重现图中所示的问题。考虑发布足够的代码，这样我们就可以重现这个问题。添加一个演示（例如jsfiddle.net）也会有帮助。@Michael_B，我已经添加了所有的后端代码，我不熟悉jsfiddle.netI熟悉你的4个标记中的3个。对不起，我对django不太了解。希望其他人能帮助您。您发布的代码不会重现图中所示的问题。考虑发布足够的代码，这样我们就可以重现这个问题。添加一个演示（例如jsfiddle.net）也会有帮助。@Michael_B，我已经添加了所有的后端代码，我不熟悉jsfiddle.netI熟悉你的4个标记中的3个。对不起，我对django不太了解。希望其他人能帮助你。
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")
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',
)