Html 防止液体容器内右侧定位的div管路断裂_Html_Css

Html 防止液体容器内右侧定位的div管路断裂

html css

Html 防止液体容器内右侧定位的div管路断裂,html,css,Html,Css,所以我在两个黑匣子之间的一个容器里有一个红色的条。框的大小是固定的，而红色条和容器是基于百分比的我的目标是减少容器的大小，以及红色条，而不让右边的黑框进入下一行。我能够通过JavaScript中的自定义数学计算来解决这个问题，但我希望将功能和设计分开。我觉得一定有一些方法可以解决这个问题，而不需要使用CSS，也不需要额外的div标签如何做到这一点 .container{ 宽度：80%；高度：40px；背景：灰色； } .盒子{ 身高：50%；边框：15px纯黑；边界顶部：无；边框

所以我在两个黑匣子之间的一个容器里有一个红色的条。框的大小是固定的，而红色条和容器是基于百分比的

我的目标是减少容器的大小，以及红色条，而不让右边的黑框进入下一行。我能够通过JavaScript中的自定义数学计算来解决这个问题，但我希望将功能和设计分开。我觉得一定有一些方法可以解决这个问题，而不需要使用CSS，也不需要额外的div标签

如何做到这一点

.container{
宽度：80%；
高度：40px；
背景：灰色；
}
.盒子{
身高：50%；
边框：15px纯黑；
边界顶部：无；
边框底部：无；
浮动：左；
}
.酒吧{
宽度：80%；
身高：100%；
背景：红色；
浮动：左
}

在CSS中使用。它来自CSS3，但是

.container{
宽度：80%；
高度：40px；
背景：灰色；
}
.盒子{
身高：50%；
边框：15px纯黑；
边界顶部：无；
边框底部：无；
浮动：左；
}
.酒吧{
宽度：计算（100%-60px）；
身高：100%；
背景：红色；
浮动：左
}

在CSS中使用。它来自CSS3，但是

.container{
宽度：80%；
高度：40px；
背景：灰色；
}
.盒子{
身高：50%；
边框：15px纯黑；
边界顶部：无；
边框底部：无；
浮动：左；
}
.酒吧{
宽度：计算（100%-60px）；
身高：100%；
背景：红色；
浮动：左
}

尝试“表格”布局


.集装箱{
宽度：80%；
高度：40px；
背景：灰色；
显示：表格；
}
.container>div{
显示：表格行；
}
.container>div>div{
显示：表格单元格；
垂直对齐：顶部；
}
.盒子{
身高：50%；
利润率：0.7px；
边框：15px纯黑；
边界顶部：无；
边框底部：实心1px黑色；
/*浮动：左*/
}
.酒吧{
宽度：80%；
身高：100%；
背景：红色；
/*浮动：左*/
}

尝试“表格”布局


.集装箱{
宽度：80%；
高度：40px；
背景：灰色；
显示：表格；
}
.container>div{
显示：表格行；
}
.container>div>div{
显示：表格单元格；
垂直对齐：顶部；
}
.盒子{
身高：50%；
利润率：0.7px；
边框：15px纯黑；
边界顶部：无；
边框底部：实心1px黑色；
/*浮动：左*/
}
.酒吧{
宽度：80%；
身高：100%；
背景：红色；
/*浮动：左*/
}

CSS3有一种主要浏览器支持的新的flex显示样式

.container{
显示：webkit flex；
显示器：flex；
高度：40px；
背景：灰色；
}
.盒子{
身高：50%；
边框：15px纯黑；
边界顶部：无；
边框底部：无；
}
.酒吧{
宽度：100%；
身高：100%；
背景：红色；
}

CSS3有一种主要浏览器支持的新的flex显示样式

.container{
显示：webkit flex；
显示器：flex；
高度：40px；
背景：灰色；
}
.盒子{
身高：50%；
边框：15px纯黑；
边界顶部：无；
边框底部：无；
}
.酒吧{
宽度：100%；
身高：100%；
背景：红色；
}

您的JS做了什么，您正试图在CSS中复制这些内容？@4castle转到JSFIDLE，将窗口缩小。你看到那个合适的盒子怎么不再合适了吗？基本上，我的javascript会重新计算红色条的宽度，因此它总是减去两个框。您的JS在CSS中复制时做了什么？@4请转到JSFIDLE，使窗口变小。你看到那个合适的盒子怎么不再合适了吗？基本上，我的javascript会重新计算红色条的宽度，因此它总是减去两个方框。如果您需要更广泛的支持，您应该使用JS作为后备。您是对的。这确实是一个非常好的工作解决方案。我相信这一点，尽管flex显示解决方案在这种情况下看起来更直观。如果你需要更广泛的支持，你应该使用JS作为后备。你是对的。这确实是一个非常好的工作解决方案。我相信这一点，尽管flex显示解决方案在这种情况下看起来更直观。这是一个很好的答案。也许唯一需要考虑的是，在IE.，它没有得到很好的支持。这是一个很好的答案。也许唯一需要考虑的是，它在IE.没有得到很好的支持。

.bar {
    width: calc(100% - 60px);
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .container {
            width: 80%;
            height: 40px;
            background: grey;
            display: table;
        }
            .container > div {
                display: table-row;
            }

                .container > div > div {
                    display: table-cell;
                    vertical-align: top;
                }
        .box {
            height: 50%;
            margin: 0 7px;
            border: 15px solid black;
            border-top: none;
            border-bottom: solid 1px black;
            /*float: left;*/
        }

        .bar {
            width: 80%;
            height: 100%;
            background: red;
            /*float: left*/
        }
    </style>
</head>
<body>
    <div class="container">
        <div>
            <div>
                <div class="box"></div>
            </div>
            <div class="bar"></div>
            <div>
                <div class="box"></div>
            </div>
        </div>
    </div>
</body>
</html>