现在我正在编写一个具有两列布局的菜单。这是代码
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="stockapps">
<img src="icons/eShop.svg">
<img src="icons/sverse.svg">
</div>
<div class="main">
<p>
Hello!
</p>
</div>
</body>
</html>
CSS:
.stockapps {
background-color: #111;
float: left;
width: 5%;
height: 100%;
}
.stockapps :after {
content: "";
display: table;
clear: both;
}
.stockapps img{
width:100%;
display: inline;
vertical-align: top;
}
.main {
float: left;
padding: 2%;
width: 91%;
overflow: hidden;
}
问题是stockapps的div标签没有填充整个屏幕的高度，而是选择只填充子对象占用的区域。
我试过使用clear-fix和设置溢出隐藏，但似乎都没有解决这个问题。这可能是一些初学者的错误，因为CSS不是我的强项
这个小提琴展示了这个问题。
您可以将stockapps和maindiv打包到一个容器中，div
为这个容器设置如下样式
我用背景色为stockappsdiv显示它的高度
.container {
display: flex;
align-items: stretch;
/*Set height as you want, you can use height in px */
height: 100vh;
}
.stockapps {
/* used background-color to show you how much height it takes*/
background-color: #999;
/*You can ignore width if it's not convenient for your desired final output */
width: 50%
}<div class="container">
<div class="stockapps">
<img src="icons/eShop.svg">
<img src="icons/sverse.svg">
</div>
<div class="main">
<p>
Hello!
</p>
</div>
</div>如果我理解正确的话，你需要为你的菜单创建一个两栏的布局。
要实现这种布局，我将<div class="stockapps">和<div class="main">包装成另一个<div>与manu-wrap类，并添加以下CSS样式:
.menu-wrap {
display: flex;
justify-content: space-between;
}
然后我将删除float属性，你应该有一个工作的两列布局。
你可以在这里找到更多关于display: flex的信息。