根据下面的图像,我在理解为什么我的盒子之间有差距时遇到了问题?我正在努力缩小这一差距,但没有成功。
我正在使用Flexbox来做这个布局。我没有包括所有的代码,只是相关的部分。
CSS代码
html {
height: 100%;
font-family: sans-serif;
}
body {
height: 100%;
overflow: hidden;
margin: 0;
display: flex;
}
.column {
height: 100%;
display: flex;
flex-direction: column;
}
#left {
flex-shrink: 0;
background-color: #333;
color: white;
}
#right {
background-color: #f3f3f3;
width: 100%;
}
.top-left {
flex-shrink: 0;
background-color: #333;
color: white;
padding: 20px;
}
.top-right {
display: inline-flex;
flex-shrink: 0;
background-color: #333;
color: white;
padding: 20px;
}
.bottom {
flex-grow: 1;
overflow-y: auto;
padding: 20px;
}
ul {
display: inline-flex;
list-style: none;
margin: 0;
}
li {
margin-right: 20px;
}
/*Box Styleing*/
.mainDashboard {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.mainDashboard>div:first-child {
flex: 0 0 100%;
background-color: yellow;
}
#Title {
margin: 0;
padding: 0;
height: 100px;
}
.box1 {
flex-grow: 1;
background-color: aqua;
width: 100px;
height: 100px;
}
.box2 {
flex-grow: 1;
background-color: red;
width: 100px;
height: 100px;
}
.box3 {
flex-grow: 1;
background-color: blue;
width: 100px;
height: 100px;
}
.box4 {
flex-grow: 1;
background-color: green;
width: 100px;
height: 100px;
}
这是创建框和标题的HTML
<div id="Title">
<p>Asset Dashboard</p>
</div>
<div class="box1">
<p>I am box1</p>
</div>
<div class="box2">
<p>I am box2</p>
</div>
<div class="box3">
<p>I am box3</p>
</div>
<div class="box4">
<p>I am box4</p>
</div>
https://stackoverflow.com/questions/51333058
复制相似问题