我在 iframe 中有一些徽標和視頻。我試圖在我的徽標和我的 3D 字之間留一個空格，所以我必須在我的 div 徽標和我的 div videos3D 之間留一個空格。
這是我的代碼筆： https ://codepen.io/Softee/pen/eYeMNBZ
.logos_container {
text-align: center;
margin-left: 85px;
}
.logos_container h1 {
margin-right: 100px;
margin-bottom: 45px;
font-size: 54px;
color: #dba974;
}
.logos {
float: left;
margin-right: 20px;
padding: 25px;
width: 20%;
}
.logos img {
border-radius: 5px;
opacity: 0.8;
width: 80%;
cursor: pointer;
}
.logos img:hover {
opacity: 1;
}
/*-----------3D-----------*/
.logos3d_container {
text-align: center;
margin-left: 25px;
margin-top: 150px;
}
.logos3d_container h1 {
margin-right: 100px;
margin-bottom: 45px;
font-size: 54px;
color: #dba974;
}
.logos3d_img {
float: left;
margin-right: 20px;
padding: 25px;
width: 29.4%;
}
.logos3d_img iframe {
border-radius: 5px;
opacity: 0.8;
width: 100%;
}
.logos3d_img iframe:hover {
opacity: 1;
}<div class="logos_container" id="portfolio">
<h1>LOGOS</h1>
<div class="logos">
<img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 1">
</div>
<div class="logos">
<img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 2">
</div>
<div class="logos">
<img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 3">
</div>
<div class="logos">
<img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 4">
</div>
<div class="logos">
<img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 5">
</div>
<div class="logos">
<img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 6">
</div>
<div class="logos">
<img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 7">
</div>
<div class="logos">
<img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 8">
</div>
</div>
<div class="logos3d_container" id="portfolio">
<h1>3D</h1>
<div class="logos3d_img">
<iframe width="560" height="315" src="https://www.youtube.com/embed/gcH-IaC0150" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="logos3d_img">
<iframe width="560" height="315" src="https://www.youtube.com/embed/gcH-IaC0150" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="logos3d_img">
<iframe width="560" height="315" src="https://www.youtube.com/embed/gcH-IaC0150" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>uj5u.com熱心網友回復：
這里是 HTML
<div class="container">
<div class="logos_container" id="portfolio">
<h1>LOGOS</h1>
<div class="logos">
<img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 1">
</div>
<div class="logos">
<img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 2">
</div>
<div class="logos">
<img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 3">
</div>
<div class="logos">
<img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 4">
</div>
<div class="logos">
<img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 5">
</div>
<div class="logos">
<img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 6">
</div>
<div class="logos">
<img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 7">
</div>
<div class="logos">
<img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 8">
</div>
</div>
<div class="logos3d_container" id="portfolio">
<h1>3D</h1>
<div class="logos3d_img">
<iframe width="560" height="315" src="https://www.youtube.com/embed/gcH-IaC0150" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="logos3d_img">
<iframe width="560" height="315" src="https://www.youtube.com/embed/gcH-IaC0150" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="logos3d_img">
<iframe width="560" height="315" src="https://www.youtube.com/embed/gcH-IaC0150" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
這是CSS
.logos_container{
text-align: center;
margin-left: 85px;
}
.logos_container h1{
margin-right: 100px;
margin-bottom: 45px;
font-size: 54px;
color: #dba974;
}
.logos {
float: left;
margin-right: 20px;
padding: 25px;
width: 20%;
}
.logos img {
border-radius: 5px;
opacity: 0.8;
width: 80%;
cursor: pointer;
}
.logos img:hover {
opacity: 1;
}
/*-----------3D-----------*/
.logos3d_container{
text-align: center;
margin-left: 25px;
margin-top: 23px; /* add your required margin */
}
.logos3d_container h1{
margin-right: 100px;
font-size: 54px;
color: #dba974;
}
.logos3d_img {
float: left;
margin-right: 20px;
padding: 25px;
width: 29.4%;
}
.logos3d_img iframe {
border-radius: 5px;
opacity: 0.8;
width: 100%;
}
.logos3d_img iframe:hover {
opacity: 1;
}
.container{
display:flex;
flex-direction: column;
}
我已將 flexbox 添加到主容器并在該容器中添加了兩個 div。這樣他們將擁有相等的空間。Flex 框方向是列，現在您可以將 margin-top 賦予“logos3d_container”，這將為您提供空間之間的空間。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/428649.html
上一篇：實作由3個按鈕觸發的3個模態