将 ul 与固定 div 中的底部对齐

网络拦截器

我在固定的侧边栏中创建了两个 ul。我试图将蓝色 ul 对齐到固定 div 的底部,但它不起作用。

<div class="sidebar">
<ul style="background:green;">
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
<ul class="align-bottom" style="background:blue;">
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
<div class="main">
MAIN CONTENT
</div>

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  height: 100%;
  overflow-x: hidden;
  background: grey;
  width: 150px;
}

.main {
  position: absolute;
  top:0;
  left: 150px;
  z-index: 1;
}

.align-bottom {
  position: relative;
  bottom:0;
  width: 100%;
}

https://jsfiddle.net/fj0b6jx3/6/#&togetherjs=2v1pIMRuTT

我的错误在哪里?

提前致谢。

大卫

.align-bottom位置从更改relativeabsolute

.align-bottom {
  position:absolute;
  bottom:0;
  left:0;
  width:150px
}

https://jsfiddle.net/qnbyxyay/1/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

将div的水平滚动条固定到页面底部

来自分类Dev

将文本结尾对齐到div的底部

来自分类Dev

将文本居中对齐到div的底部

来自分类Dev

无法将ul li列表对齐到div的顶部

来自分类Dev

将div对齐到底部而不将其从流中删除

来自分类Dev

DIV内部垂直对齐底部UL

来自分类Dev

是否可以将div与div底部的位置对齐:固定?

来自分类Dev

将浮动div对齐到底部

来自分类Dev

如何将div固定到较大div的底部?

来自分类Dev

将固定的左对齐div的内容对齐到右侧

来自分类Dev

将多个div元素设置为页面底部的“位置:固定”

来自分类Dev

将标题与div的底部对齐

来自分类Dev

如何将图像与div的底部对齐?

来自分类Dev

将滑动div放置在固定的底部位置

来自分类Dev

将文本移到div的底部以与图像对齐

来自分类Dev

将文本基线对齐到div的底部

来自分类Dev

如何使用flexbox将元素固定到div的底部?

来自分类Dev

如何使用“ position:absolute”将页脚固定在div的底部?

来自分类Dev

固定div在底部

来自分类Dev

无法将ul li列表对齐到div的顶部

来自分类Dev

DIV内部垂直对齐底部UL

来自分类Dev

将固定的导航div与右外部div对齐

来自分类Dev

在Bootstrap 3中将嵌套行固定/对齐到其父列的底部

来自分类Dev

在div的中间对齐<ul>

来自分类Dev

将div设置在父母div的底部,而没有固定的高度

来自分类Dev

如何将div中的sth对齐到底部?

来自分类Dev

将Div中的按钮对齐到底部

来自分类Dev

将 UL 垂直对齐到 div 的顶部

来自分类Dev

Flexbox - 在 div 中响应右对齐 UL?