Image of my current layout
我正在学习flexbox,我正在尝试创建一个常见的布局,可以在 Jmeter 板类模板中找到,这类模板包含左侧的主导航菜单(侧边栏),顶部导航菜单用于用户通知或网站主题等内容,顶部导航菜单下方是主要内容区域。
我所面临的问题是,我的导航列表项“B”(它周围有一个白色边框,以供查看)由于某种未知原因没有被推到“紫色”div的底部。
我将nav
和ul
元素的高度都设置为100%,这样它们就可以和主体一样占据垂直空间,所以根据我的理解,添加一个margin-top: auto
实际上应该会将B一直推到底部。
我的理解是否有根本性的问题?我是否在正确实施这种主题的正确轨道上?
感谢您抽出时间与我们分享您的知识!
* {
margin: 0;
padding: 0;
/* box-sizing: border-box; */
/* border: 1px solid black; */
}
body {
display: flex;
height: 100vh;
}
#left {
background-color: aqua;
width: 5rem;
}
.column {
display: flex;
flex-direction: column;
}
.top-left,
.top-right {
padding: 1rem;
background-color: aliceblue;
}
nav {
background-color: red;
height: 100%;
}
ul {
background-color: blueviolet;
height: 100%;
}
nav ul li:last-child {
margin-top: auto;
border: 1px solid white;
}
#right {
background-color: orange;
flex-grow: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="./project.css" rel="stylesheet">
</head>
<body>
<div id="left" class="column">
<div class="top-left">
Logo
</div>
<nav>
<ul>
<li>A</li>
<li>B</li>
</ul>
</nav>
</div>
<div id="right" class="column">
<div class="top-right">
Top right
</div>
<div>
Content
</div>
</div>
</body>
</html>
3条答案
按热度按时间flvlnr441#
我设法通过向
ul
元素添加以下CSS属性来将B推到底部:我仍然不确定为什么需要这样做。
qlfbtfca2#
CSS代码正确,但应用到了错误的元素。
ul
应获取flex box属性,以便所有li
项显示为列。请将flex属性应用到ul
。lymnna713#
如果要使用
margin-top:auto
,请尝试以下操作:您也可以尝试其他方式,如:
按网格: