我想并排放置我所有的类别元素,但出于某种原因,我将两个元素并排放置,然后开始新的一行,在左侧我仍然有很多空间...
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)));
}
模板
{% 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 %}
我是否必须放置一个占页面宽度 100% 的 div 容器?任何提示都会有所帮助。
最佳答案
我可能会提供另一种方法。利用 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 中的元素。有关您可以使用的更多样式,请参阅本文:A Complete Guide to Flexbox
关于html - Django 模板全宽 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51071950/