Prevent line break of a right positioned div inside a fluid container
Question
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. I feel that there must be some way to solve this with CSS without hacks or extra div tags.
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 answers
solution1
1 2016-05-02 02:55:45
Use calc() in your CSS. It's from CSS3, but supported in all major browsers, even 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>
solution2
1 ACCPTED 2016-05-02 03:41:43
CSS3 has a new flex display style supported by the major browsers.
.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
solution3
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.