Html 具有左-中-右内容且结果不同的面板

结果应该是什么样的： 左侧（静态宽度）-中间部分应填充内容-右侧（静态宽度）

当使用JSFIDLE时，有一个解决方案，但在实际的网站中它不起作用。在网站中，它看起来像是在没有CSS的情况下设置样式。但即使它是在CSS中设置的，它也不会填充中间部分，它总是重叠左/右面板，占据整个网页的100%宽度

它的外观：

#内容面板1{
文本对齐：居中
}
#ContentLeft1{
背景：黄色；
浮动：左；
宽度：80px；
}
#ContentRight1{
背景：蓝色；
浮动：对；
宽度：80px；
}
#内容1{
文本对齐：左对齐；
背景：橙色；
保证金：0自动；
显示：内联块
宽度：100%；
}

此部件应显示在左侧
此部件应显示在右侧
这部分应与其他部分的中间部分相配合

您可以使用

css calc

进行建议。是浏览器对此的支持

#ContentPanel1 {
    text-align:center
}
#ContentLeft1 {
    background:Yellow;
    float: left;
    width: 80px;
}
#ContentRight1 {
    background:Blue;
    float: right;
    width: 80px;
}
#ContentMiddle1 {
    text-align:left;
    background:Orange;
    margin:0 auto; 
    display:inline-block
    width: calc(100% - 80px - 80px); // or width: calc(100% - 160px);
}

---

您可以使用

css calc

进行建议。是浏览器对此的支持

#ContentPanel1 {
    text-align:center
}
#ContentLeft1 {
    background:Yellow;
    float: left;
    width: 80px;
}
#ContentRight1 {
    background:Blue;
    float: right;
    width: 80px;
}
#ContentMiddle1 {
    text-align:left;
    background:Orange;
    margin:0 auto; 
    display:inline-block
    width: calc(100% - 80px - 80px); // or width: calc(100% - 160px);
}

---

您可以尝试使用“calc”功能，中间的内容有100%-（两个面板宽度）

#内容面板1{
文本对齐：居中
}
#ContentLeft1{
背景：黄色；
浮动：左；
宽度：80px；
}
#内容1{
背景：橙色；
浮动：左；
宽度：计算（100%-160px）；
}
#ContentRight1{
背景：蓝色；
浮动：对；
宽度：80px；
}

此部件应显示在左侧
这部分应与其他部分的中间部分相配合
此部件应显示在右侧

您可以尝试使用“calc”功能，中间的内容有100%-（两个面板宽度）

#内容面板1{
文本对齐：居中
}
#ContentLeft1{
背景：黄色；
浮动：左；
宽度：80px；
}
#内容1{
背景：橙色；
浮动：左；
宽度：计算（100%-160px）；
}
#ContentRight1{
背景：蓝色；
浮动：对；
宽度：80px；
}

此部件应显示在左侧
这部分应与其他部分的中间部分相配合
此部件应显示在右侧

@Nasenbaer它能解决你的问题吗？@Nasenbaer它能解决你的问题吗？