html - 如何将具有 table-cell 显示属性的 html 元素向右推送？

Question

所以这是 fiddle :http://jsfiddle.net/myxgy7xg/3/ 我想将“.toTheRight”推到行的右侧，固定宽度为 200 像素。同时，中间 '.b' 的元素占据了当前行的所有剩余宽度。

代码如下: HTML:

<div class="a">
    haha
</div>

<div class="b">
    classb
</div>

<div class="toTheRight">
    to the right!!!
</div>

CSS:

.a,.b,.toTheRight{
    display:table-cell;
}
.a{
    width:200px;
}
.b{
    width:30%;}
.c{ 
    width:200px;
}

Answer 1

这是您要找的吗？

http://jsfiddle.net/myxgy7xg/4/

我只是将 min-width 属性设置为 a 和 c

.a,.b,.toTheRight{
    display:table-cell;
}
.a{
    width:200px;
    min-width:200px;
}
.b{
    width:70%;}
.c{ 
    width:200px;
    min-width:200px;
}

这迫使他们占用整个 200px；

https://developer.mozilla.org/en-US/docs/Web/CSS/min-width