Question

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

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

如何实现这一目标？

＆＃13;

.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
}

＆＃13;

<div class="container">
  <div class="box"></div>
  <div class="bar"></div>
  <div class="box"></div>
</div>

＆＃13;

JSFiddle

Answer 1

在CSS中使用calc()。它来自CSS3，但是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>

Answer 2

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>

要将框元素设置为特定宽度，请使用 min-width 而不是宽度

Answer 3

尝试＆＃34;表＆＃34;布局

<!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>

防止流体容器内右侧定位div的断线

3 个答案: