html - 如何使用flexbox删除div之间的空白
问题描述
我对 div 之间的空白有疑问。
这是我的项目: 在此处输入图片描述
我需要做如下 在此处输入图像描述
我的部分代码:我尝试在父元素上设置高度 100%,但这并没有解决我的问题。
我想在这个项目中使用 flexbox。有没有人可以帮助我解决这个问题?
import "../scss/main.scss";
import 'regenerator-runtime/runtime';
let page = 1;
let limit = 5;
let counter = 0;
const gallery = document.querySelector('.gallery');
const heading = document.querySelector('.heading');
const article = document.createElement('article');
const fullSizeImage = document.createElement('section')
const btnNextJsonImages = document.querySelector('.btn-nextJson-images');
const loadImagesJson = () => {
page++;
getImages();
};
btnNextJsonImages.addEventListener('click', loadImagesJson);
const getImages = () => {
const url = `http://localhost:3000/info/?_page=${page}&_limit=${limit}`
fetch(url)
.then((res) => {
return res.json()
})
.then(data => showImages(data))
.catch(err => console.log(err))
};
const showImages = (images) => {
if (images.length === 0) {
btnNextJsonImages.setAttribute('disabled', true);
} else {
images.forEach(image => {
const { name } = image.name;
const { thumbnail } = image.images;
const { nameArtist } = image.artist.name;
const item = document.createElement('div');
item.className = 'gallery-image';
item.dataset.id = counter;
item.innerHTML = `
<img src="${thumbnail}" />
<h1>${image.name}</h1>
<p>${image.artist.name}</p>
`;
counter++;
gallery.appendChild(item);
item.addEventListener('click', () => imageDetail(image))
});
}
}
.heading,.gallery,.article-information,.full-size-image{
width: calc(100%-10%);
min-height: 1px;
margin: 0 7%;
@media screen and (min-width:780px){
width: 730px;
margin: 0 auto;
}
@media screen and (min-width:1100px){
width: 1000px;
margin: 0 auto;
}
.gallery {
height: 100%;
@media screen and (min-width:780px){
display:flex;
justify-content: center;
flex-direction: column;
flex-wrap: wrap;
}
.gallery-image{
margin-top: 24px;
position: relative;
height: 100%;
width: 100%;
@media screen and (min-width:780px){
flex:1;
width:44%;
margin-right: 40px;
}
h1{
position:absolute;
left: 6%;
bottom:20%;
font-family: $libre-font;
color:$white-color;
font-size: 22px;
line-height: 30px;
font-weight: normal;
width: 70%;
}
p{
position:absolute;
left: 6%;
bottom: 12%;
font-family: $libre-font;
color:$white-color;
font-weight:normal;
font-size: 13px;
line-height: 16px;
width: 70%;
opacity: 0.75;
}
}
}
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>gallery-slide</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap"
rel="stylesheet" />
</head>
<body>
<header class='heading'>
<div>
<p>galleria.</p>
<p>start slideshow</p>
</div>
</header>
<hr>
<button class="btn-nextJson-images">Załaduj kolejne zdjęcia</button>
<main class="gallery">
</main>
<!-- <article> --
<img />
<h1>
</h1>
<p></p>
<footer>
<button>prev img</button>
<button>next img</button>
</footer>
</article> -->
<script src="index.js"></script>
</body>
</html>
解决方案
推荐阅读
- react-native - 无法从一个屏幕导航到另一个屏幕
- sql - 在 SQL 中连接两个查询的结果并在给定条件下生成结果
- python - 将 Python 函数应用于 Pandas 分组的 DataFrame - 加速计算的最有效方法是什么?
- java - 如何部分自动布局图流图
- add-in - 关于 DraftSight / SolidWorks API 的新手提示
- html - 无法单击菜单项_Selenium
- c# - 艾玛迪斯汽车可用性
- python - 如何将烧瓶参数传递给烧瓶函数的装饰器
- nativescript - 如何在 nativescript 中的 NgClass 中应用背景颜色属性?
- javascript - 突出显示单词并发送 GET 请求