Flex Box CSS问题
Flex Box CSS问题
提问于 2018-07-14 05:32:46
根据下面的图像，我在理解为什么我的盒子之间有差距时遇到了问题？我正在努力缩小这一差距，但没有成功。
我正在使用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>
回答 1
Stack Overflow用户
发布于 2018-07-14 06:31:46
希望你很好，你使用p标签的事实可能是原因，试着去掉p，也许用div代替？
我想你希望盒子之间没有缝隙吧？
<div id="Title">
Asset Dashboard
</div>
<div class="box1">
I am box1
</div>
<div class="box2">
I am box2
</div>
<div class="box3">
I am box3
</div>
<div class="box4">
I am box4
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51333058
复制相关文章
相似问题