Question

我不确定如何最好地解释这一点。我正试图将三个div元素并排放置;第一个（从左到右）是柔性宽度，第二个是柔性宽度，第三个是静态宽度，它向右浮动。前两个位于与第三个相同级别的div内;这是为了保持最大宽度下前两个的总宽度。我所做的Here is a jsfiddle。

我的问题是，当中间div中的文本很长时，中间div会降到第一个以下，而不是文本换行。我不能给中间一个最大宽度，因为第一个div是灵活的，可以变小。知道如何解决这个问题吗？

我知道可以通过使用表来实现，但我真的不愿意这样做，除非它是唯一简单的解决方案。

编辑：我决定只做固定宽度。为此所需的工作量是不值得的，特别是考虑到大多数时候，灵活的宽度永远不会被使用对我来说无论如何。

Answer 1

如果您想要一个纯粹的基于CSS的解决方案，那么它可能会有点困难，并且浏览器兼容性也不高。虽然您可以通过使用名为display:table ;和display:table-cell;的css属性来实现此目的。再次使用较旧的浏览器，也许IE-9也获胜了;无法渲染。

然后你应该去寻找jQuery解决方案。您可以使用以下代码 -

$(document).ready(function(){
    var w = 400 - $('.inner_container .left_box').width();      
    $('.inner_container .middle')css('width',w);
});

感谢。

Answer 2

自版本8以来，IE支持display: table属性和相关属性，例如display: table-cell，以及所有版本的Firefox和Chrome / Safari。

参考：http://caniuse.com/#feat=css-table

我相信这是你的理由。

<强> HTML

<div class="container">
    <div class="inner_container">
        <div class="left_box">
            <p>Lorem ipsum dolor sit amet</p>
        </div>
        <div class="middle">
            <p>Lorem ipsum dolor sit amet</p>
        </div>
    </div>
    <div class="right_static">Hi!</div>
</div>

<强> CSS

.container {
    position: relative;
    width: 500px;
    border: 1px solid #000;
    overflow: auto;
}

.right_static {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 100px;
    background-color: green;
}    

.inner_container {
    display: table;
    width: 400px;
    overflow: auto;
}

.left_box {
    display: table-cell;
    background-color: red;
}

.middle {
    display: table-cell;
    background-color: #9999FF;
}

<强>样本

http://jsfiddle.net/nd7qj/

顺便提一下，你在问题中提到最左边的div应该有灵活的宽度，但是在你提供的CSS中它有固定的宽度。所以我没有在我的代码中应用宽度。

并排，灵活的宽度div没有包装？

2 个答案: