时间戳

首页 > 解决方案 > 博客文章都显示为不同的大小

html - 博客文章都显示为不同的大小

问题描述

这段代码显示了几篇博客文章。每个都包含在一个div. 所有帖子显示为不同的大小，具体取决于帖子中的文本数量以及图片的存在与否。

{% block content %}
  {% for news in object_list %}
    <div class="card" style="width: 300px; display: inline-block;">
       <div class="card-header">
        <span class="font-weight-bold">
          <a href="{% url 'news_detail' news.pk %}" style="color:black">{{ news.title }}</a>
        </span> &middot;
        <span class="text-muted">by {{ news.author }} | {{ news.date }}</span>
      </div>
      <div class="card-body">
        {% if news.thumb %}
          <p align="center"><img src="{{ news.thumb.url }}" /></p>
        {% endif %}
        <p>{{ news.body | linebreaks | truncatewords:30 }}
          <a href="{% url 'news_detail' news.pk %}">Full story</a></p>
      </div>
      <div class="card-footer">
        {% if user.is_authenticated %}
          <a href="{% url 'news_edit' news.pk %}">Edit</a>
          <a href="{% url 'news_delete' news.pk %}">Delete</a>
        {% endif %}
      </div>
    </div>
  {% endfor %}
{% endblock content %}

有什么办法可以将每个帖子设置为相同的大小？我认为它们都应该默认为最大的。

标签： html

解决方案

您所要做的就是为容器或容器中的元素设置一个固定的高度。我在这里做了一个快速演示

.newsimage {
  max-width: 250px;
  max-height: 250px;
}

.newscontainer {
  display: inline-block;
  width: 300px;
}

.newsimagecontainer {
  width: 250px;
  height: 200px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card newscontainer">
       <div class="card-header">
        <span class="font-weight-bold">
          <a href="{% url 'news_detail' news.pk %}" style="color:black">Foo Bar</a>
        </span> &middot;
        <span class="text-muted">by Me, Today</span>
      </div>
      <div class="card-body">
          <p align="center" class="newsimagecontainer"><img src="https://images.template.net/wp-content/uploads/2016/02/16102715/Example-of-Newspaper-Template-Download1.jpeg" class="newsimage" /></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor tincidunt ultrices. Ut lacinia lobortis sem, ut vestibulum mi pharetra eget. Maecenas luctus scelerisque mi, et tristique nisl rhoncus non.
          <a href="{% url 'news_detail' news.pk %}">Full story</a></p>
      </div>
      <div class="card-footer">
      </div>
    </div>
        <div class="card newscontainer">
       <div class="card-header">
        <span class="font-weight-bold">
          <a href="{% url 'news_detail' news.pk %}" style="color:black">Foo Bar</a>
        </span> &middot;
        <span class="text-muted">by Me, Today</span>
      </div>
      <div class="card-body">
          <p align="center" class="newsimagecontainer"><img src="https://images.template.net/wp-content/uploads/2016/02/16102715/Example-of-Newspaper-Template-Download1.jpeg" class="newsimage" /></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor tincidunt ultrices. Ut lacinia lobortis sem, ut vestibulum mi pharetra eget. Maecenas luctus scelerisque mi, et tristique nisl rhoncus non.
          <a href="{% url 'news_detail' news.pk %}">Full story</a></p>
      </div>
      <div class="card-footer">
      </div>
    </div>
        <div class="card newscontainer">
       <div class="card-header">
        <span class="font-weight-bold">
          <a href="{% url 'news_detail' news.pk %}" style="color:black">Foo Bar</a>
        </span> &middot;
        <span class="text-muted">by Me, Today</span>
      </div>
      <div class="card-body">
          <p align="center" class="newsimagecontainer"><img src="" class="newsimage" /></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor tincidunt ultrices. Ut lacinia lobortis sem, ut vestibulum mi pharetra eget. Maecenas luctus scelerisque mi, et tristique nisl rhoncus non.
          <a href="{% url 'news_detail' news.pk %}">Full story</a></p>
      </div>
      <div class="card-footer">
      </div>
    </div>

推荐阅读