html - Django Template full width CSS
问题描述
i would like to put all of my Category elements side by side but for some reason i get two elemnts beside each-other and after that a new row starts and on the left i still got a lot of space...
css
.category {
float: left;
width: 40%;
margin-right: 3.33333%;
margin-bottom: 3.33333%;
padding: 15px;
text-align: center;
box-sizing: border-box;
background: radial-gradient(white, white, whitesmoke);
border-radius: 3%;
}
.categorycover {
height: 100px;
-webkit-box-reflect: below 8px -webkit-gradient(linear, right top, right bottom, from(transparent), to(rgba(255, 255, 255, 0.2)));
}
template
{% block content %}
{% for category in object_list %}
<div>
<span class="category">
<img class="categorycover" src="/media/{{ category.cover }}">
<h1>{{ category.title }}</h1>
<p>{{ category.post_set.count }}Posted element(s)</p>
<p>{{ category.description|readmore:10|linebreaksbr}}</p>
</span>
</div>
{% endfor %}
{% endblock %}
do i have to put a div container with 100% of the page width on it? Any hint would be helpful.
解决方案
我可能会提供另一种方法。利用 Flexbox 的强大功能让项目很好地排成一排。
{% block content %}
{% for category in object_list %}
<div class="container">
<span class="category">
<img class="categorycover" src="/media/{{ category.cover }}">
<h1>{{ category.title }}</h1>
<p>{{ category.post_set.count }}Posted element(s)</p>
<p>{{ category.description|readmore:10|linebreaksbr}}</p>
</span>
</div>
{% endfor %}
{% endblock %}
然后,您的样式可能如下所示:
.container{
display:flex;
flex-direction: row;
justify-content: space-around; #or space-evenly
}
.category{
padding: 15px;
text-align: center;
box-sizing: border-box;
background: radial-gradient(white, white, whitesmoke);
border-radius: 3%;
}
父容器 flexbox 样式将为您处理对齐以及边距间距。它非常适合水平或垂直对齐 div 中的项目。有关可以使用的更多样式,请参阅这篇文章:Flexbox 完整指南
推荐阅读
- angular - 如何在 Angular 单元测试中模拟 AWS 放大方法
- python - Flask Python 中的 KeyError
- java - org.flywaydb.core.internal.license.FlywayEnterpriseUpgradeRequiredException - ClassNotFoundException
- google-cloud-platform - 数据变化时查询
- javascript - 轮播项目位置每天都在变化!!(Django,实现)
- python - opencv中重叠圆圈之间的黑色区域 - python
- c# - 在 ASP.NET MVC 中将 10000 个数据上传到 Devextreme 数据网格时出现问题
- mysql - mySQL如何从没有组的重复值中选择MAX(日期)
- javascript - 无法从片段活动中的 firebase 获取值列表、图像
- javascript - Vuetify 验证消息变量