python - 带卡片的 HTML div 响应式设计
问题描述
标题并没有真正描述我的问题。我有一个带有描述我的项目的“卡片”的网络应用程序,但我需要它来填满屏幕,同时保持相同的大小。
我现在的设计是这样的: current design
我希望我的设计是这样的:我想要的设计
请原谅我糟糕的平面设计技巧,并提前感谢!
编辑:当前代码
<div class="row">
{% for task in tasks %}
<div class="card">
<div class="alert">
<strong>Status: </strong> {{ task.status }}
</div>
{% if logo == False %}
<img src="[redacted]" alt="Logo for {{ task.content }}" style="width:100%">
{% else %}
<img src="{{ task.logo }}" alt="Logo for {{ task.content }}" style="width:50%">
{% endif %}
<h1>{{ task.content }}</h1>
<p>{{ task.description }}</p>
<a href='https://{{ task.website }}'><button>Visit {{ task.content }}'s website</button></a>
<div class="btn-group"><p><a href='delete/{{ task.id }}'><button style="width:50%">Delete</button></a><a href='update/{{ task.id }}'><button style="width:50%">Edit</button></a></p></div>
</div>
<br>
{% endfor %}
{% endif %}
解决方案
您应该使用 css 样式表来创建类似卡片的结构。下面给出了一个示例代码。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Float four columns side by side */
.column {
float: left;
width: 25%;
padding: 0 10px;
}
/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive columns */
@media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
/* Style the counter cards */
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 16px;
text-align: center;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h2>Responsive Column Cards</h2>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="column">
<div class="card">
<h3>Card 1</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<div class="column">
<div class="card">
<h3>Card 2</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<div class="column">
<div class="card">
<h3>Card 3</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<div class="column">
<div class="card">
<h3>Card 4</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
</div>
</body>
</html>
推荐阅读
- php - str_replace 方法在 php 中不起作用
- eclipse - 如何使用scala制作一个简单的界面
- javascript - 在循环中删除多个 JSON 对象
- python - 我可以使用 GitPython 将 bitbucket 存储库导入到 gitlab 吗?
- python - 如何修复弹性搜索中的“KeyError:'*'”
- c# - 关于在我的设计中是否有继承的困惑
- java - 读取 Java/Spring 中的属性值
- java - Bean 名称“bookDto”的 BindingResult 和普通目标对象都不能用作请求属性
- reactjs - 如何在 redux observable 史诗中为 ajax 响应发出两个动作
- c# - C# Form Application Process.Start() Gives Access is denied 错误