Question

所以这里是小提琴：http://jsfiddle.net/myxgy7xg/3/ 我想推动＆＃39; .TheTheRight＆＃39;在行的右侧，固定宽度为200px。同时中间的元素＆＃39; .b＆＃39;占用当前行的所有剩余宽度。

这是代码： 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;
}

迫使他们占用整个200像素;

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

Answer 2

你需要JavaScript。试试这个（测试和工作）：

HTML：

//Added a wrapper div so you can get the width

<div id="divRowStuff" style="width:100%">
    <div class="a">
        haha
    </div>

    <div id="b" class="b"> //Gave this an ID since we want to manipulate it.  You can access it by child/class selectors, but for simplicity, this illustrates what you need to do.
        classb
    </div>

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

CSS：

//You weren't using class "c", so I removed it for clarity:

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

JavaScript的：

<script type="text/javascript">
        $("document").ready(function(){
            var divRowStuffWidth = document.getElementById("divRowStuff").offsetWidth;
            var widthToSet = divRowStuffWidth - 400;
            document.getElementById("b").style.width = widthToSet + "px";
    });

</script>

因此，基本上，我们确定父元素的宽度并减去400，因为这是您拥有的其他两个元素的已知宽度。然后，我们将“b”的宽度设置为该值，因此它占用了所有剩余空间。

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

2 个答案: