如何将元素带到分区的底部？

Question

我有一个包含徽标和导航菜单的标题div 假设我左侧有一个徽标100x50，导航菜单应该float: right

如何让导航菜单在标题div的基础上方对齐？ 如果徽标尺寸发生变化会发生什么情况，是否可以根据徽标尺寸进行操作而无需调整margin-top元素的nav？ 的 HTML

<div class="container">
    <header class="site-header">
        <div class="site-logo">
        </div><!-- /site-logo -->

        <nav class="site-nav">
        </nav>
    </header>
</div>

CSS

.site-header nav ul {
  float: right;
  border: 1px solid green;
}

div.site-logo {
  float: left;
  width: 100px;
  height: 50px;
  border: 1px solid #000;
}

P.S。：如果可以在没有javascript的情况下完成，那就很好了

Answer 1

我将以flexbox为例给你一个例子。这比绝对位置容易得多，而且您不必担心徽标大小。

＆＃13;

＆＃13;

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 500px;
  height: 50px;
  border: 1px solid #000;
}

div.site-logo {
  width: 100px;
  height: 50px;
  background-color: #00f;
}

div.site-nav {
  width: 300px;
  height: 25px;
  background-color: #f00;
  z-index: 1;
}

＆＃13;

<div class="container">
    <header class="site-header">
        <div class="site-logo"></div><!-- /site-logo -->

        <div class="site-nav"></div>
    </header>
</div>

＆＃13;

＆＃13;

＆＃13;

如果您使用flex，则可能需要为其他浏览器添加属性名称。

Answer 2

要为导航使用绝对定位，标题需要相对定位：

header { position: relative; }

然后像：

.site-header nav ul {
  position: absolute;
  right: 5px; /* or whatever you choose */
  bottom: 5px; /* or whatever you choose */
}

Answer 3

以下是如何实现它的简单方法：JSFiddle example

.site-header {
  width: 500px;
  height: 50px;
  border: 1px solid black
}

div.site-logo {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: blue;
}

div.site-nav {
  display: inline-block;
  width: 300px;
  height: 25px;
  background-color: red;
  float: right;
  margin-top: 4.2vh;
}

Answer 4

要将某些内容与元素的底部对齐，请将该内容的UIStackView设置为Passenger View，并将position坐标设置为absolute，以便该东西与包含元素的底部边界之间将出现零像素。

bottom

请注意，您绝对只能在定位的父级中定位：绝对：

0

...或相对而言，您必须确保强制执行块格式化上下文（BFC）来保存您的内容（徽标+菜单），通常是通过指定您的相对父级的.site-header nav { position: absolute; bottom: 0; // Aligned to parent's bottom border... right: 0; // ...and parent's right border. } 行为来执行任何操作.site-header { position: absolute; } ：

overflow

这是一个纯CSS demo，表明它适合任何徽标大小。

Answer 5

如果您不想使用flex。最简单的方法是为padding元素添加nav。

padding top
    +
nav height
    +
padding top

总高度等于标题栏的高度。