我尝试将 Plus 卡保持在网格中央,但无法正常工作。我也尝试过
position: absolute
,但卡片在它下面。
我需要添加或删除的
div
元素围绕永久居中的 div
。目标是使用 Javascript 添加新注释或删除注释,但使用 css 测试设计。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body {
width: 100%;
background-color: #ffffff;
color: black;
width: 100vw;
height: 100vh;
border: #008f4b solid 6px;
}
.nav_container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
}
.nav {
width: 300px;
height: 40px;
text-decoration: none;
}
ul {
list-style-type: none;
margin: auto;
padding: 0px;
overflow: hidden;
background-color: #008f4b;
border-radius: 20px;
display: flex;
align-items: center;
padding-left: 10px;
padding-right: 10px;
border: #024731 solid 3px;
}
li {
display: inline-block;
color: white;
text-align: center;
padding: 10px 16px;
text-decoration: none;
cursor: pointer;
height: 100%;
width: 100%;
margin-top: -5px;
margin-bottom: -5px;
}
li:hover {
color: white;
background-color: #00b85f;
}
.search_container {
margin-left: 10px;
}
.notes_container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 50vw;
margin: auto;
}
.notes_wrapper {
display: grid;
margin: 0 auto;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 20px;
height: 100%;
grid-template-areas: "note note add_note note note", "note note note note note", ;
}
.note_card {
grid-area: 'note';
padding: 6px 6px 6px 6px;
width: 200px;
margin: 20px;
height: 40px;
background-color: #ebebeb;
font-size: 24px;
}
.add_card {
grid-area: 'add_note';
padding: 40px 20px;
width: 200px;
margin: 20px;
font-size: 100px;
text-align: center;
background-color: #ebebeb;
cursor: pointer;
}
<div class="nav_container">
<div class="nav">
<ul>
<li>All</li>
<li>Recent</li>
<li>Pinned</li>
<li>Search</li>
<!-- <li class="search_container"><image src="assets/Icons/search.svg"></image></li> -->
</ul>
</div>
</div>
<div class="notes_container">
<div class="notes_wrapper">
<div class="note_card">
<h3>Notes</h3>
</div>
<div class="note_card">
<h3>Notes</h3>
</div>
<div class="add_card">+</div>
<div class="note_card">
<h3>Notes</h3>
</div>
<div class="note_card">
<h3>Notes</h3>
</div>
<div class="note_card">
<h3>Notes</h3>
</div>
<div class="note_card">
<h3>Notes</h3>
</div>
</div>
</div>
您可以使用网格容器,所有卡片自动放置在其中,并且加号按钮手动放置在中心。 这是一个例子:
const grid = document.querySelector('#grid');
function addCard() {
const div = document.createElement('div');
div.className='card';
div.innerHTML = '×';
div.addEventListener('click', removeCard);
grid.appendChild(div);
}
function removeCard() {
card = grid.querySelector('.card');
card?.remove();
}
for(let i=0; i<20; i++) addCard();
#grid {
display: grid;
grid-template-rows: auto;
grid-template-columns: 100px 100px 100px 100px 100px 100px;
grid-gap: 6px;
margin: auto;
width: fit-content;
user-select: none;
}
.card {
height: 50px;
background: #f8e122;
border-radius: 6px;
cursor: pointer;
color: red;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 20px;
}
#plus {
background: #1626ef;
color: #ffffff;
grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 3;
font-size: 68px;
font-weight: bold;
width: 80px;
height: 80px;
border-radius: 50%;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
line-height: 0;
cursor: pointer;
}
<div id="grid">
<div id="plus" onCLick="addCard()">+</div>
</div>