如何将div放到页眉的底部

Question

所以我想问我如何将这行/div放到标题的底部，我对此非常陌生。我实际上只知道HTML和CSS的基础知识。请回答。(所有代码都可以在屏幕截图中看到(

这就是HTML。

<div class="header">
<img src="Resources/Logo_White_00000.png" class="Logo" alt="Logopng">
<div class="header-right">
<a href="About.html">ABOUT</a>
</div>

<div class="header-left">
<a href="Videos.html">VIDEOS</a>
</div>
<div class="WhiteHeaderBar">
</div>
</div>

带白色div 的页眉

Answer 1

HTML按照元素的编写顺序显示元素。此外，我会使用CSS网格或Flexbox来完成这种布局。下面是一个使用flexbox的例子：

.header{
background-color: black;
display: flex;
border-bottom: white;
}
.header > div{
flex-grow: 1;
text-align: center;
vertical-align: center;
font-size: 20pt;
padding: 10px;
margin-bottom: 20px;
border-bottom: 2px solid white;
}
.header a{
line-height: 100px;
color: white;
text-decoration: none;
}

<div class="header">
<div class="header-left">
<a href="Videos.html">VIDEOS</a>
</div>
<div class="Logo">
<img src="https://via.placeholder.com/80" alt="Logopng">
</div>
<div class="header-right">
<a href="About.html">ABOUT</a>
</div>
</div>

请注意，我重新排序了您的项目，并去掉了底部元素，因为如果您使用border-bottom，这是不必要的。

Answer 2

对于这样薄的行，在页眉上放置合适的px高度的边界底部属性是理想的，但如果你需要这样做，可以用flexbox这样做：

在左/右divs+img标记周围放置另一个包装，并将头容器设置为flexbox对象，将flex direction属性设置为column。将当前的".header"类更改为CSS中的新".header-wrap"。

然后将"；对齐自身"；属性添加到值为"的.WhiteHeaderBardiv中；柔性端"；我认为，如果填充/边距重置为0px的值，应该将其附加到标头的底部。

.header {
display: flex;
align-items: center;
justify content: center;
flex-direction: column;
}
.header-wrap {
/* styles from old .header class */
}
.WhiteHeaderBar {
align-self: flex-end
}

让我知道这是否有效，如果你需要调整之前设置的值以使其正常工作，不要气馁。如果没有css或其他相关文件(如图像(，很难提供正确的答案。

Answer 3

你能不能完全去掉WhiteHeaderBar元素，在底部放一个边框：solid 3px#fff；在整个头部组件上？空元素是毫无意义的。。。