Html 将相邻的方框相互对齐，并做出相应的调整

我试图有6个盒子紧挨着lg。然后是4，然后是3，然后是2。我不知道如何制作每个盒子的宽度，也不明白为什么当我有4个盒子相邻时，盒子之间的边距如此之大，还有3个盒子和2个盒子。如果左/右边距始终可能为20px，并且框的宽度根据屏幕尺寸进行调整（现在对于两个框在一起的小屏幕，框相互重叠），如何使此代码的响应性最佳？我试过flexbox，但对我无效。我想继续我已经启动的解决方案，如图所示。谢谢

.box2{
保证金：5px 5px 5px 0；
文本对齐：居中；
浮动：左；
背景颜色：黄色；
颜色：#000；
边框：5px纯蓝色；
高度：自动；
宽度：160px；
字体大小：12px；
}

---

尝试在css中使用类似的内容，即百分比，而不是固定像素 字体大小为vw而不是px或pt

.box2 {
margin: 5% 5% 5% 0;
text-align: center;
float: left;
background-color: yellow;
color: #000;
border: 5px solid blue;
height: auto;
width: 61%;
font-size: 2.5vw;

---

}

尝试在css中使用类似的内容，即百分比，而不是固定像素 字体大小为vw而不是px或pt

.box2 {
margin: 5% 5% 5% 0;
text-align: center;
float: left;
background-color: yellow;
color: #000;
border: 5px solid blue;
height: auto;
width: 61%;
font-size: 2.5vw;

---

}也许这会对你有所帮助

.box2 {
    width: 100%;
}

见下文

@导入url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.box2{
保证金：5px 5px 5px 0；
文本对齐：居中；
浮动：左；
背景颜色：黄色；
颜色：#000；
边框：5px纯蓝色；
高度：自动；
宽度：100%；
字体大小：12px；
}

---

也许这会对你有所帮助

.box2 {
    width: 100%;
}

见下文

@导入url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.box2{
保证金：5px 5px 5px 0；
文本对齐：居中；
浮动：左；
背景颜色：黄色；
颜色：#000；
边框：5px纯蓝色；
高度：自动；
宽度：100%；
字体大小：12px；
}

---

这是您想要的结果吗

.box2{
边距：5×2×2×0；
文本对齐：居中；
浮动：左；
背景颜色：黄色；
颜色：#000；
边框：5px纯蓝色；
高度：自动；
字体大小：12px；
填充物：5px10px；
}

---

这是您想要的结果吗

.box2{
边距：5×2×2×0；
文本对齐：居中；
浮动：左；
背景颜色：黄色；
颜色：#000；
边框：5px纯蓝色；
高度：自动；
字体大小：12px；
填充物：5px10px；
}

---

首先，您应该在

框

上设置

宽度：100%

，这样它就占据了整个列的宽度。您使用的是

Bootstrap

，因此列之间的间距在引导文件中定义，您可以更改其名为

@网格槽宽度

，并下载该引导文件

.box2{
保证金：5px 5px 5px 0；
文本对齐：居中；
背景颜色：黄色；
颜色：#000；
显示：内联块；
边框：5px纯蓝色；
宽度：100%；
字体大小：12px；
}

---

首先，您应该在

框

上设置

宽度：100%

，这样它就占据了整个列的宽度。您使用的是

Bootstrap

，因此列之间的间距在引导文件中定义，您可以更改其名为

@网格槽宽度

，并下载该引导文件

.box2{
保证金：5px 5px 5px 0；
文本对齐：居中；
背景颜色：黄色；
颜色：#000；
显示：内联块；
边框：5px纯蓝色；
宽度：100%；
字体大小：12px；
}