Html 如何将元素自动调整为下一个元素？ 我试着做一个中间有标志的菜单。 我的徽标大小是固定的，每个单元格有3个按钮

我不能达到这个结果

**例如：**

.mainbox{
高度：自动；
左边距：自动；
右边距：自动；
最小高度：100%；
宽度：100%；
}
#盒子{
浮动：无；
高度：182px；
左边距：自动；
利润上限：109px；
明确：无；
宽度：自动；
右边距：自动；
背景色：rgb（77,77,77）；
}
#框2{
浮动：无；
高度：182px；
左边距：自动；
边际上限：0px；
明确：无；
宽度：349.015625px；
背景色：rgb（199,0,0）；
位置：静态；
顶部：0px；
左：0px；
右边距：自动；
}
#框1{
浮动：左；
高度：158px；
左边缘：0%；
边缘顶部：12px；
明确：无；
宽度：36.182452%；
背景色：rgb（74164180）；
}
#框3{
浮动：对；
高度：158px；
左边距：0px；
利润上限：-170px；
明确：无；
宽度：36.18369%；
显示：块；
右边距：0%；
背景色：rgb（78、180、74）；
}

---

我通过使用

宽度：calc（（100%-350px）/2）从中间框中减去来计算两个框的宽度。

.mainbox{
高度：自动；
左边距：自动；
右边距：自动；
最小高度：100%；
宽度：100%；
}
#盒子{
浮动：无；
高度：182px；
左边距：自动；
利润上限：109px；
明确：无；
宽度：自动；
右边距：自动；
背景色：rgb（77,77,77）；
}
#框2{
浮动：无；
高度：182px；
左边距：自动；
边际上限：0px；
明确：无；
宽度：350px；
背景色：rgb（199,0,0）；
位置：静态；
顶部：0px；
左：0px；
右边距：自动；
}
#框1{
浮动：左；
高度：158px；
左边缘：0%；
边缘顶部：12px；
明确：无；
宽度：计算（（100%-350px）/2）；
背景色：rgb（74164180）；
}
#框3{
浮动：对；
高度：158px；
左边距：0px；
利润上限：-170px；
明确：无；
宽度：计算（（100%-350px）/2）；
显示：块；
右边距：0%；
背景色：rgb（78、180、74）；
}

这个怎么样？
我用桌子试过了

正文{
边际：0px；
}
桌子{
宽度：100vw；
}
tr{
宽度：100vw；
}
运输署{
宽度：自动；
边框：1px纯黑；
}
.固定尺寸{
宽度：500px；
}

测试
测试
测试

您能使用flexbox吗？试一试：

#框{
高度：182px；
背景色：rgb（77,77,77）；
显示器：flex；
}
#框2{
高度：182px；
宽度：349.015625px；
背景色：rgb（199,0,0）；
}
#框1{
高度：158px；
边缘顶部：12px；
背景色：rgb（74164180）；
柔性生长：1；
}
#框3{
高度：158px；
边缘顶部：12px；
背景色：rgb（78、180、74）；
柔性生长：1；
}

---

如果左、右div的宽度相同，Flexbox可以做到这一点

.mainbox{}
#盒子{
高度：182px；
边缘顶部：1米；
背景色：rgb（77,77,77）；
显示器：flex；
}
#框2{
宽度：350px；
边缘：1米；
背景色：rgb（199,0,0）；
}
#框1{
边缘：1米；
弹性：1；
背景色：rgb（74164180）；
}
#框3{
边缘：1米；
弹性：1；
背景色：rgb（78、180、74）；
}

非常简单的向后兼容性（浮点vs Frasbox）是使用2个浮动的div，大小为一半，中间有一个绝对定位的标志，具有负边距：
好办法！我从来不知道我可以在css中使用calc。所有的答案都是好的和有效的，我必须接受哪一个呢？？？谢谢Tim，干净，简单和准确注：所有的答案都是好的和有效的，我接受了这个答案，因为它正是我需要的，而且比其他方法更简单。谢谢大家：）谢谢，很高兴这有帮助。每个人都给出了非常好的备选答案，包括@Paulie_D，他给出的答案非常相似，所以我要投赞成票
* {
  box-sizing: border-box;
}
#box {
  width: 100%;
  float: left;
  position: relative;
  background: white;
}
#box2 {
  float: left;
  padding: 20px;
  position: absolute;
  top: 0;
  left: 50%;
  width: 200px;
  margin-left: -100px;
  background: red;
}
#box1, 
#box3{
  float: left;
  width: 50%;
}
#box1 {
  padding-right: 120px;
  background: blue;
}
#box3 {
  padding-left: 120px;
  background: green;
}