Div 之间没有水平空间
[英]No Horizontal Space between Divs
问题描述
I have these two images that I am using as buttons to redirect users.
我有这两张图片用作重定向用户的按钮。 I had to change my HTML code so I can have the proper transitions/animations over my images.我不得不更改我的 HTML 代码，以便我可以对我的图像进行适当的转换/动画处理。 Now that I have altered it, I cannot get my images to properly space eachother out in the row they are currently in, they are hugging the left.现在我已经改变了它，我无法让我的图像在它们当前所在的行中正确地隔开彼此，它们紧靠左边。 Whenever I add any CSS to adjust, it may partially adjust it, but then the overlay expands over more than just the image.每当我添加任何 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>
1 个解决方案
解决方案1
1 已采纳 2021-02-17 20:15:00
Since you already have a Flexbox container, you can just add justify-content: space-evenly to .container and allow the flex items to be "spaced evenly" in the row.由于您已经有一个 Flexbox 容器，您只需将justify-content: space-evenly evenly 添加到.container并允许弹性项目在行中“均匀间隔”。 If you wanted them to be centered in the row, use justify-content: center .如果您希望它们在行中居中，请使用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>
If the space between each image in the row with justify-content: space-evenly is too much, then just use justify-content: center and add some left/right margin to the .image containers.如果带有justify-content: space-evenly 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
div之间的水平空间 - Horizontal space between divs
div之间的HTML / CSS水平空白 - HTML/CSS horizontal white space between divs
在div之间在div中创建水平空间 - creating horizontal space in div between divs
CSS中水平div之间的自动空间 - auto space between horizontal divs in CSS
2格填充水平空间 - 2 divs fill horizontal space
水平空间2格 - 2 divs in horizontal space
删除 2 个 div 之间的水平空间。Margin 不起作用？ - Remove the horizontal space between 2 divs.Margin is not working?
无法消除包含div内的2个水平div之间的空间 - cannot eliminate space between 2 horizontal divs inside containing div
2个DIV之间的水平边框 - Horizontal border between 2 DIVs
HTML-div之间的空间 - HTML - space between divs
相关标签