时间戳

首页 > 解决方案 > div之间没有水平空间

html - div之间没有水平空间

问题描述

我有这两个图像用作重定向用户的按钮。我必须更改我的 HTML 代码，以便我可以在我的图像上使用适当的过渡/动画。现在我已经改变了它，我无法让我的图像在它们当前所在的行中正确地相互隔开，它们正在拥抱左边。每当我添加任何要调整的 CSS 时，它可能会对其进行部分调整，但随后叠加层会扩大到不仅仅是图像。

.landinghead{
  text-align: center;
  font-size: 30px;
}

.projectInfo{
  text-align: center;
  font-size: 15px;
  margin-top: -20px;
}

.container {
    display: flex;
    position: relative;
}

.image{
  position: relative;
  width: 400px;
  display: flex;
  justify-content: center;
  
}

.image__img{
  display: block;
  width: 100%;
  height: 100%;
}

.image__overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-family: 'Quicksand', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s;
}

.image__overlay > * {
  transform: translateY(20px);
  transition: transform 0.25s;
}

.image__overlay:hover{
  opacity: 1;
}

.image__overlay:hover > *{
  transform: translateY(0);
}

.image__title{
  font-size: 2em;
  font-weight: bold;
}

.image__description{
  font-size: 1.25em;
  margin-top: 0.25em;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Projects Landing Page</title>
</head>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<div id="particles-js"></div>
<body>
    <h3 class="landinghead">Projects Landing Page</h3>
    <p class ="projectInfo">Here you will find a collection of Active/Ongoing Projects</p>
<div class="center container">
        <div class="image">
        <a href="www.google.com">
            <img class="image__img" src="https://api.army.mil/e2/c/images/2021/01/26/4c5cde5d/max1200.jpg" alt="Army"/>
            <div class="image__overlay">
                <div class="image__title">Army</div>
                <p class="image__description">
                Click here to be redirected to the Army site.
                </p>
            </div>
            </a>
        </div>
        <div class="image">
          <a href="www.google.com">
            <img class="image__img" src="https://api.army.mil/e2/c/images/2021/01/20/153dc153/max1200.jpg" alt="Army"/>
            <div class="image__overlay">
                <div class="image__title">USMC</div>
                <p class="image__description">
                Click here to be redirected to the USMC site.
                </p>
            </div>
            </a>
        </div>
    </div>
</body>

标签： htmlcss

解决方案

由于您已经有一个 Flexbox 容器，您可以添加justify-content: space-evenly并.container允许 flex 项目在行中“均匀分布”。如果您希望它们在行中居中，请使用justify-content: center.

.landinghead{
  text-align: center;
  font-size: 30px;
}

.projectInfo{
  text-align: center;
  font-size: 15px;
  margin-top: -20px;
}

.container {
    display: flex;
    justify-content: space-evenly;
    position: relative;
}

.image{
  position: relative;
  width: 400px;
  display: flex;
  justify-content: center;
  
}

.image__img{
  display: block;
  width: 100%;
  height: 100%;
}

.image__overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-family: 'Quicksand', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s;
}

.image__overlay > * {
  transform: translateY(20px);
  transition: transform 0.25s;
}

.image__overlay:hover{
  opacity: 1;
}

.image__overlay:hover > *{
  transform: translateY(0);
}

.image__title{
  font-size: 2em;
  font-weight: bold;
}

.image__description{
  font-size: 1.25em;
  margin-top: 0.25em;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Projects Landing Page</title>
</head>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<div id="particles-js"></div>
<body>
    <h3 class="landinghead">Projects Landing Page</h3>
    <p class ="projectInfo">Here you will find a collection of Active/Ongoing Projects</p>
<div class="center container">
        <div class="image">
        <a href="www.google.com">
            <img class="image__img" src="https://api.army.mil/e2/c/images/2021/01/26/4c5cde5d/max1200.jpg" alt="Army"/>
            <div class="image__overlay">
                <div class="image__title">Army</div>
                <p class="image__description">
                Click here to be redirected to the Army site.
                </p>
            </div>
            </a>
        </div>
        <div class="image">
          <a href="www.google.com">
            <img class="image__img" src="https://api.army.mil/e2/c/images/2021/01/20/153dc153/max1200.jpg" alt="Army"/>
            <div class="image__overlay">
                <div class="image__title">USMC</div>
                <p class="image__description">
                Click here to be redirected to the USMC site.
                </p>
            </div>
            </a>
        </div>
    </div>
</body>

如果行中每个图像之间的空间justify-content: space-evenly太大，则只需使用justify-content: center并向.image容器添加一些左/右边距。

.landinghead{
  text-align: center;
  font-size: 30px;
}

.projectInfo{
  text-align: center;
  font-size: 15px;
  margin-top: -20px;
}

.container {
    display: flex;
    justify-content: center;
    position: relative;
}

.image{
  position: relative;
  width: 400px;
  display: flex;
  justify-content: center;
  margin: 0 .5rem;
  
}

.image__img{
  display: block;
  width: 100%;
  height: 100%;
}

.image__overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-family: 'Quicksand', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s;
}

.image__overlay > * {
  transform: translateY(20px);
  transition: transform 0.25s;
}

.image__overlay:hover{
  opacity: 1;
}

.image__overlay:hover > *{
  transform: translateY(0);
}

.image__title{
  font-size: 2em;
  font-weight: bold;
}

.image__description{
  font-size: 1.25em;
  margin-top: 0.25em;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Projects Landing Page</title>
</head>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<div id="particles-js"></div>
<body>
    <h3 class="landinghead">Projects Landing Page</h3>
    <p class ="projectInfo">Here you will find a collection of Active/Ongoing Projects</p>
<div class="center container">
        <div class="image">
        <a href="www.google.com">
            <img class="image__img" src="https://api.army.mil/e2/c/images/2021/01/26/4c5cde5d/max1200.jpg" alt="Army"/>
            <div class="image__overlay">
                <div class="image__title">Army</div>
                <p class="image__description">
                Click here to be redirected to the Army site.
                </p>
            </div>
            </a>
        </div>
        <div class="image">
          <a href="www.google.com">
            <img class="image__img" src="https://api.army.mil/e2/c/images/2021/01/20/153dc153/max1200.jpg" alt="Army"/>
            <div class="image__overlay">
                <div class="image__title">USMC</div>
                <p class="image__description">
                Click here to be redirected to the USMC site.
                </p>
            </div>
            </a>
        </div>
    </div>
</body>

推荐阅读