Question

<div class="a">
    <div class="b">
        Text
    </div>
    <div class="b">
        Text
    </div>
    <div class="c" style="width:100px">
        Text
    </div>  
</div>

如何让每个b div占据剩余宽度的50％？我想要这样的东西：

+----------------+----------------+-------+
|50% of remaining|50% of remaining| 100px |
+----------------+----------------+-------+

如果更容易，你可以在b div周围加一个div。

这可能没有javascript吗？提前谢谢！

Answer 1

您可以将display:table用于此目的：

Demo Fiddle

HTML

<div class="a">
    <div class="b">Text</div>
    <div class="b">Text</div>
    <div class="c">Text</div>
</div>

CSS

.a{
    display:table;
}
.b, .c{
    display:table-cell;
    border:1px solid black;
}
.b{
    width:50%;
}
.c{
    width:100px;
}

请注意，您还需要关闭.a div，如下所示，删除无效的style="100px"。

Answer 2

使用calc()的解决方案：

div>div {
    display:inline-block;
    vertical-align: top;
}

.a{
    width:100%;
}

.b{
    width: calc(50% - (100px / 2)); /* 100px / 2 div.b */ 
    background:red;
}

.c{
    width:100px;
    background: blue;
}

JSFiddle

CanIUse calc()

Answer 3

这是 FIDDLE

.a {
  display: table;
  width: 100%;
  border-collapse: collapse;
}
.b,
.c {
  display: table-cell;
  padding: 5px;
  border: 1px solid #333;
}
.b {
  width: 44.5%;
}
.c {
  width: 100px;
}

Answer 4

.b { width: calc(50% - 50px); }

Demo

如何让两个div共享剩余的宽度？

4 个答案:

Demo Fiddle