我正在创建一个简单的小型“旗帜大厅”HTML 页面,该页面应该有一个狭窄的旗帜列,显示为 png 图像,每个旗帜都位于 CSS 图片框架内。 CSS 框架示例here 是我的起点。我最外面的 DIV,即我的旗帜大厅,有一个柔性显示屏。在里面我放置了带有垂直堆叠的数字的 div。以下是我希望这堆图像相框的外观:
但这是它目前的样子,请注意,我在上面画了一些注释,指出了问题:
我对旗帜在框架内的外观感到满意,但我有 3 个问题:
这是我的完整代码,任何帮助找出最佳方法的人将不胜感激:
let countries = ["Albania", "Austria", "Belarus", "Croatia"];
let flagURLs = [
"https://upload.wikimedia.org/wikipedia/commons/d/d0/Flag_of_Albania.png",
"https://upload.wikimedia.org/wikipedia/commons/7/76/Flag_of_Austria.png",
"https://upload.wikimedia.org/wikipedia/commons/7/78/Flag_of_Belarus.png",
"https://upload.wikimedia.org/wikipedia/commons/1/18/Flag_of_Croatia.png",
];
let html = "";
for (let i = 0; i < countries.length; i++) {
let country = countries[i];
let flagImgURL = flagURLs[i];
html +=
'<div class="flag-frame-container" id="flag-frame-container-' +
country +
'"">' +
' <figure class="flag-frame-figure">' +
' <div class="flag-frame-outerBevel">' +
' <div class="flag-frame-flatSurface">' +
' <div class="flag-frame-innerBevel">' +
' <img src="' +
flagImgURL +
'" class="flag-frame-img">' +
" </div>" +
" </div>" +
" </div>" +
' <figurecaption class="flag-frame-caption">' +
country +
" </figurecaption>" +
" </figure>" +
"</div>";
}
let div = document.getElementById("hall-of-flags");
div.innerHTML += html;
for (let i = 0; i < countries.length; i++) {
let country = countries[i];
let el = document.getElementById("flag-frame-container-" + country);
el.addEventListener("click", function () {
alert("I am an alert box!");
});
}
#hall-of-flags {
background-color: lightblue;
}
.flag-frame-container {
background-color: pink;
padding: 0;
margin: 0;
box-sizing: border-box;
height: 40%;
}
.flag-frame-figure {
align-self: center;
width: 90%;
height: 50%;
margin: 1em auto;
}
.flag-frame-outerBevel {
box-shadow: 4px 6px 12px 0 black;
border-width: 5px;
border-style: solid;
border-color: rgb(109, 84, 58) rgb(24, 19, 13) rgb(24, 19, 13)
rgb(109, 84, 58);
}
.flag-frame-flatSurface {
border: 12px solid rgb(65, 40, 16);
}
.flag-frame-innerBevel {
border-width: 5px;
border-style: solid;
border-color: rgb(24, 19, 13) rgb(109, 84, 58) rgb(109, 84, 58)
rgb(24, 19, 13);
}
.flag-frame-img {
display: block;
clear: both;
height: 100%;
width: 85%;
padding: 7.5% 7.5% 10% 7.5%;
background-color: rgb(255, 249, 224);
border-width: 3px;
border-style: solid;
border-color: rgb(207, 166, 0) rgb(207, 166, 0) rgb(145, 110, 0)
rgb(145, 110, 0);
}
.flag-frame-caption {
background: #d19e1d;
background: -webkit-linear-gradient(to right, #d19e1d, #ffd86e, #e3a812);
background: linear-gradient(to right, #d19e1d, #ffd86e, #e3a812);
font-family: cursive;
text-align: center;
border-radius: 10%;
}
<div id="hall-of-flags"></div>
尝试混合柔性和绝对定位,并希望能够将标语牌置于相框底部的中心,并将框架本身在其容器内垂直居中。
问题1: 将 .flag-frame-container 和 .flag-frame-caption 的位置设置为相对位置。然后你可以设置 .flag-frame-caption 的底部向上移动到框架中。
问题2: 给 .flag-frame-outerBevel 一些顶部边距,这样它就可以通过向上移动标题而获得与底部左侧类似的垂直空间。
问题3: 我无法重现您所描述的问题。
.flag-frame-container {
/* EDIT Need this so that flag-frame-caption is positioned relative to this and not the body */
position: relative;
text-align: center;
}
.flag-frame-caption {
/* EDIT */
position: relative;
bottom: 70px;
}
.flag-frame-outerBevel {
/* EDIT Make it so the cyan gap between frames is centered vertically */
margin-top: 1rem;
}