有关Flex Box CSS的问题?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (38)

如下图所示,为什么我的盒子之间存在间隙?我试图缩小这个间隙但没有成功。

我正在使用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>

提问于
用户回答回答于

你使用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>

扫码关注云+社区

领取腾讯云代金券