根据我的模板格式容纳图像答案

【问题标题】：Accommodate images according my template format根据我的模板格式容纳图像
【发布时间】：2015-03-17 11:01:24
【问题描述】：

我已经为我的练习项目下载了一个免费的引导程序，引导程序只有 html 代码，当然也有 css 样式、js 和图像。我的问题是我在 django 上有一个项目，可以从这样的标签打印图像：

{% extends 'base.html' %}

{% block title %} Project Sample {% endblock %}

{% load static from staticfiles %}

{% block content %}

    <!-- Start Page Banner -->
    <div class="page-banner">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h2>Portfolio</h2>
                    <p>Portfolio Subtitle</p>
                </div>
                <div class="col-md-6">
                    <ul class="breadcrumbs">
                        <li><a href="#">Home</a></li>
                        <li>Portfolio</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- End Page Banner -->

    <!-- Start Content -->
    <div id="content">
        <div class="container">
            {% for Product in products %}
            <div class=" portfolio-page portfolio-4column">
            <ul id="portfolio-list" data-animated="fadeIn">
                <li>
                    <img src="{{ Product.pimage0.url }}" alt="{{ Product.name }}" />
                    <div class="portfolio-item-content">
                        <span class="header">{{ Product.name }}</span>
                        <p class="body">{{ Product.size }}</p>
                    </div>
                    <a href="#"><i class="more">+</i></a>

                </li>
            </ul>
            </div>
            {% endfor %}
        </div>
    </div>
    <!-- End Content -->

{% endblock %}

正如您看到的我的模板，它继承了我的 base.py，有一个 {% for Product in products %} 标记，用于调用此处创建的一些“项目”：

models.py

from django.db import models
from django.template.defaultfilters import slugify

class Product(TimeStampModel):

    name = models.CharField(max_length=200, unique=True)
    slug = models.SlugField(editable=False)
    # Product Images
    pimage0 = models.ImageField(upload_to = 'prodimg')
    pimage1 = models.ImageField(upload_to = 'prodimg')
    pimage2 = models.ImageField(upload_to = 'prodimg')
    pimage3 = models.ImageField(upload_to = 'prodimg')
    # END Product Images
    size = models.CharField(max_length=50)
    content = models.TextField()
    # Product Stats
    tolerance = models.CharField(max_length=3)
    efficiency = models.CharField(max_length=3)
    performance = models.CharField(max_length=3)
    lowrad = models.CharField(max_length=3)
    # END Product Stats
    # Other Features
    protection = models.TextField()
    environments = models.TextField()
    # END Other Features
    # Key Features
    kfeature0 = models.ImageField(upload_to = 'kfeats')
    kfeature1 = models.ImageField(upload_to = 'kfeats')
    # END Key Features
    category = models.ForeignKey(Category)


    def save(self, *args, **kwargs):
        if not self.id:
            self.slug = slugify(self.name)
        super(Product, self).save(*args, **kwargs)

    def __str__(self):
        return self.name

我在导入该上下文时没有任何问题，但是当我这样做时，我得到了这个打印：

这是原始模板视图（我想查看我的模板）：

如果我必须代表我的“产品”表单标签上下文，我如何才能使我的打印看起来像原来的那样？，我相信这个问题适用于任何 html 配置，因为我看起来我的类产品很好：

如果有帮助，请查看我的 views.py：

class SingleCatView(TemplateView):

    template_name = 'products/single_category.html'

    def get_context_data(self, **kwargs):
        context = super(SingleCatView, self).get_context_data(**kwargs)
        context['products'] = Product.objects.all().order_by('-created')[:6]
        context['categories'] = Category.objects.all()
        return context

最后这是模板的原始代码：

<!-- Start Content -->
        <div id="content">
            <div class="container">
                <div class=" portfolio-page portfolio-4column">

                    <ul id="portfolio-list" data-animated="fadeIn">
                    <li>
                        <img src="images/Portfolio/1.png" alt="" />
                        <div class="portfolio-item-content">
                            <span class="header">Town winter 2013</span>
                            <p class="body">web develpment, design</p>
                        </div>
                        <a href="#"><i class="more">+</i></a>

                    </li>
                    <li>
                        <img src="images/Portfolio/2.png" alt="" />
                        <div class="portfolio-item-content">
                            <span class="header">Quarterly Musashino</span>
                            <p class="body">web develpment, design</p>
                        </div>
                        <a href="#"><i class="more">+</i></a>

                    </li>
                    <li>
                        <img src="images/Portfolio/3.png" alt="" />
                        <div class="portfolio-item-content">
                            <span class="header">Mainichi April 2014</span>
                            <p class="body">web develpment, design</p>
                        </div>
                        <a href="#"><i class="more">+</i></a>

                    </li>
                    <li>
                        <img src="images/Portfolio/4.png" alt="" />
                        <div class="portfolio-item-content">
                            <span class="header">Shitamachi Rocket</span>
                            <p class="body">web develpment, design</p>
                        </div>
                        <a href="#"><i class="more">+</i></a>

                    </li>
                    <li>
                        <img src="images/Portfolio/5.png" alt="" />
                        <div class="portfolio-item-content">
                            <span class="header">Majesty express vol. 01</span>
                            <p class="body">web develpment, design</p>
                        </div>
                        <a href="#"><i class="more">+</i></a>

                    </li>
                    <li>
                        <img src="images/Portfolio/6.png" alt="" />
                        <div class="portfolio-item-content">
                            <span class="header">Monocle issue 69</span>
                            <p class="body">web develpment, design</p>
                        </div>
                        <a href="#"><i class="more">+</i></a>

                    </li>
                    <li>
                        <img src="images/Portfolio/7.png" alt="" />
                        <div class="portfolio-item-content">
                            <span class="header">Monocle issue 69</span>
                            <p class="body">web develpment, design</p>
                        </div>
                        <a href="#"><i class="more">+</i></a>

                    </li>
                    <li>
                        <img src="images/Portfolio/8.png" alt="" />
                        <div class="portfolio-item-content">
                            <span class="header">Monocle issue 69</span>
                            <p class="body">web develpment, design</p>
                        </div>
                        <a href="#"><i class="more">+</i></a>

                    </li>
                    <li>
                        <img src="images/Portfolio/9.png" alt="" />
                        <div class="portfolio-item-content">
                            <span class="header">Monocle issue 69</span>
                            <p class="body">web develpment, design</p>
                        </div>
                        <a href="#"><i class="more">+</i></a>

                    </li>
                    <li>
                        <img src="images/Portfolio/10.png" alt="" />
                        <div class="portfolio-item-content">
                            <span class="header">Monocle issue 69</span>
                            <p class="body">web develpment, design</p>
                        </div>
                        <a href="#"><i class="more">+</i></a>

                    </li>
                    <li>
                        <img src="images/Portfolio/11.png" alt="" />
                        <div class="portfolio-item-content">
                            <span class="header">Monocle issue 69</span>
                            <p class="body">web develpment, design</p>
                        </div>
                        <a href="#"><i class="more">+</i></a>

                    </li>
                    <li>
                        <img src="images/Portfolio/12.png" alt="" />
                        <div class="portfolio-item-content">
                            <span class="header">Monocle issue 69</span>
                            <p class="body">web develpment, design</p>
                        </div>
                        <a href="#"><i class="more">+</i></a>

                    </li>
                </ul>
                    <!-- End Portfolio Items -->

                </div>
            </div>
        </div>
        <!-- End Content -->

欢迎投稿，感谢评价！

【问题讨论】：

让自己熟悉 bootstrap 的网格系统和 css float 属性。然后，如果您需要严格的行，请查看 Django 的 divisibleby 模板标签。使用它，您可以为每个第 x 个元素赋予不同的类。

标签： python html css django twitter-bootstrap

【解决方案1】：

您可以简单地将ul 更改为list-inline 类型：

<ul id="portfolio-list" class="list-inline" data-animated="fadeIn">

但是您应该首先阅读 Bootstrap。它不会神奇地为您格式化模板。

我的建议只有在您的内容具有固定宽度并且图片大小合适时才能正常工作。

【讨论】：

【解决方案2】：

我回答了我自己的问题，首先感谢 rnevius，我的问题是在模板中放置我的迭代标签，我应该有这样的标签：

<div class=" portfolio-page portfolio-4column">
        <ul id="portfolio-list" data-animated="fadeIn">
        {% for Product in products %}
            <li>
                <img src="{{ Product.pimage0.url }}" alt="{{ Product.name }}" />
                <div class="portfolio-item-content">
                    <span class="header">{{ Product.name }}</span>
                    <p class="body">{{ Product.size }}</p>
                </div>
                <a href="#"><i class="more">+</i></a>

            </li>
        {% endfor %}
        </ul>
        </div>

而不是我上面的问题，所以我可以很好地复制原始样式。

【讨论】：