防止流体容器内正确定位的div断线
[英]Prevent line break of a right positioned div inside a fluid container
问题描述
So I have a red bar inside a container which lies between two black boxes. 
因此，我在一个位于两个黑匣子之间的容器中有一个红色的条。 The boxes are fixed in size while the red bar and the container are based on percentages. 盒子的大小是固定的，红色条和容器是基于百分比的。
My goal is to reduce the size of the container, as well as the red bar without the right black box breaking onto the next line. 我的目标是减小容器的大小以及红色条，而右侧的黑匣子不要折断下一行。 I was able to resolve the issue via custom mathematical calculations in JavaScript, but I want to keep functionality and design separate. 我能够通过JavaScript中的自定义数学计算解决问题，但我想将功能和设计分开。 I feel that there must be some way to solve this with CSS without hacks or extra div tags. 我觉得必须有某种方法可以使用CSS来解决此问题，而不会造成黑客入侵或多余的div标签。
How can this be achieved? 如何做到这一点？
.container { width: 80%; height: 40px; background: grey; } .box { height: 50%; border: 15px solid black; border-top: none; border-bottom: none; float: left; } .bar { width: 80%; height: 100%; background: red; float: left }
<div class="container"> <div class="box"></div> <div class="bar"></div> <div class="box"></div> </div>
3 个解决方案
解决方案1
1 2016-05-02 02:55:45
Use calc() in your CSS. 在CSS中使用calc() 。 It's from CSS3, but supported in all major browsers, even IE9 . 它来自CSS3，但在所有主要浏览器（ 甚至IE9）中都受支持 。
.bar {
width: calc(100% - 60px);
}
.container { width: 80%; height: 40px; background: grey; } .box { height: 50%; border: 15px solid black; border-top: none; border-bottom: none; float: left; } .bar { width: calc(100% - 60px); height: 100%; background: red; float: left }
<div class="container"> <div class="box"></div> <div class="bar"></div> <div class="box"></div> </div>
解决方案2
1 已采纳 2016-05-02 03:41:43
CSS3 has a new flex display style supported by the major browsers. CSS3具有主要浏览器支持的新的flex显示样式。
.container { display: webkit-flex; display: flex; height: 40px; background: grey; } .box { height: 50%; border: 15px solid black; border-top: none; border-bottom: none; } .bar { width: 100%; height: 100%; background: red; }
<div class="container"> <div class="box"></div> <div class="bar"></div> <div class="box"></div> </div>
To set the box elements to a specific width use min-width rather than width 要将框元素设置为特定宽度，请使用min-width而不是width
解决方案3
0 2016-05-02 03:28:26
Try "table" layout 尝试“表格”布局
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.