我有一个仪表板，其中有一节，我在渲染卡，我发现卡链接上的代码笔的问题是我的卡不是在行方向，这是给一个糟糕的桌面视图。我检查了3-4次CSS，但找不到任何可以帮助他们在行方向。我提供我的代码和原始卡代码和我的代码。帮助实现行方向。提前谢谢
我的代码
{% extends 'blood/adminbase.html' %} {% block content %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
#content main .head-title {
display: flex;
align-items: center;
justify-content: space-between;
grid-gap: 16px;
flex-wrap: wrap;
}
#content main .head-title .left h1 {
font-size: 36px;
font-weight: 600;
margin-bottom: 10px;
color: var(--dark);
}
/* ======== */
.ag-format-container {
width: 1142px;
margin: 0 auto;
}
.ag-courses_box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row!important;
/* justify-content: space-between; */
padding: 50px 0;
}
.ag-courses_item {
-ms-flex-preferred-size: calc(33.33333% - 30px);
flex-basis: calc(33.33333% - 30px);
margin: 0 15px 30px;
overflow: hidden;
border-radius: 28px;
}
.ag-courses-item_link {
display: block;
padding: 30px 20px;
background-color: #121212;
overflow: hidden;
position: relative;
}
.ag-courses-item_link:hover,
.ag-courses-item_link:hover .ag-courses-item_date {
text-decoration: none;
color: #fff;
}
.ag-courses-item_link:hover .ag-courses-item_bg {
-webkit-transform: scale(10);
-ms-transform: scale(10);
transform: scale(10);
}
.ag-courses-item_title {
min-height: 87px;
margin: 0 0 25px;
overflow: hidden;
font-weight: bold;
font-size: 30px;
color: #fff;
z-index: 2;
position: relative;
}
.ag-courses-item_date-box {
font-size: 18px;
color: #fff;
z-index: 2;
position: relative;
}
.ag-courses-item_date {
font-weight: bold;
color: #f9b234;
-webkit-transition: color 0.5s ease;
-o-transition: color 0.5s ease;
transition: color 0.5s ease;
}
.ag-courses-item_bg {
height: 128px;
width: 128px;
z-index: 1;
position: absolute;
top: -75px;
right: -75px;
border-radius: 50%;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
@media only screen and (max-width: 979px) {
.ag-courses_item {
-ms-flex-preferred-size: calc(50% - 30px);
flex-basis: calc(50% - 30px);
}
.ag-courses-item_title {
font-size: 24px;
}
}
@media only screen and (max-width: 767px) {
.ag-format-container {
width: 96%;
}
}
@media only screen and (max-width: 639px) {
.ag-courses_item {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.ag-courses-item_title {
min-height: 72px;
line-height: 1;
font-size: 24px;
}
.ag-courses-item_link {
padding: 22px 40px;
}
.ag-courses-item_date-box {
font-size: 16px;
}
}
</style>
</head>
<body>
<div class="head-title">
<div class="left">
<h1>Dashboard</h1>
</div>
</div>
<!-- ============ -->
<div class="ag-format-container">
<!-- code injected here -->
</div>
<!-- ============ -->
<script>
const bloodTypes = [
{ type: "A+", unit: "{{A1.unit}}", color: "#3ecd5e" },
{ type: "B+", unit: "{{B1.unit}}", color: "#e44002" },
{ type: "O+", unit: "{{O1.unit}}", color: "#952aff" },
{ type: "AB+", unit: "{{AB1.unit}}", color: "#cd3e94" },
{ type: "A-", unit: "{{A2.unit}}", color: "#4c49ea" },
{ type: "B-", unit: "{{B2.unit}}", color: "#7D0552" },
{ type: "O-", unit: "{{O2.unit}}", color: "#5D6D7E" },
{ type: "AB-", unit: "{{AB2.unit}}", color: "#2ECC71" },
];
const container = document.querySelector(".ag-format-container"); // assuming that you have a container element with a class of 'container'
bloodTypes.map((bloodType) => {
const ItemBodyBox = document.createElement("div");
ItemBodyBox.classList.add("ag-courses_box");
const ItemBody = document.createElement("div");
ItemBody.classList.add("ag-courses_item");
const itemLink = document.createElement("a");
itemLink.classList.add("ag-courses-item_link");
itemLink.href = "#";
const itemBg = document.createElement("div");
itemBg.classList.add("ag-courses-item_bg");
itemBg.style.backgroundColor = bloodType.color;
const itemTitle = document.createElement("div");
itemTitle.classList.add("ag-courses-item_title");
itemTitle.textContent = bloodType.type;
const itemDateBox = document.createElement("div");
itemDateBox.classList.add("ag-courses-item_date-box");
itemDateBox.textContent = "Start: ";
const itemDate = document.createElement("span");
itemDate.classList.add("ag-courses-item_date");
itemDate.textContent = bloodType.unit;
itemDateBox.appendChild(itemDate);
itemLink.appendChild(itemBg);
itemLink.appendChild(itemTitle);
itemLink.appendChild(itemDateBox);
const coursesItem = document.createElement("div");
coursesItem.classList.add("ag-courses_item");
coursesItem.appendChild(itemLink);
const coursesBox = document.createElement("div");
coursesBox.classList.add("ag-courses_box");
coursesBox.appendChild(coursesItem);
const formatContainer = document.createElement("div");
formatContainer.classList.add("ag-format-container");
formatContainer.appendChild(coursesBox);
container.appendChild(formatContainer);
});
</script>
</body>
</html>
{% endblock content %}
原卡码代码
尝试添加css属性
display: flex;