0

我不确定如何最好地解释这一点。我试图让三个 div 元素并排放置；第一个（从左到右）是灵活宽度，第二个也是灵活宽度，第三个是静态宽度，它向右浮动。前两个与第三个位于同一级别的 div 内；也就是说，将前两个的总宽度保持在最大宽度以下。 这是我正在做的事情的一个jsfiddle 。

我的问题是，当中间 div 中的文本很长时，中间 div 将低于第一个，而不是让文本换行。我不能给中间的一个最大宽度，因为第一个 div 是灵活的并且可以变得更小。知道我该如何解决这个问题吗？

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

编辑：我决定只做固定宽度。为此所需的工作量是不值得的，尤其是考虑到在大多数情况下，无论如何我都不会使用灵活的宽度。

4

2 回答 2

0

如果您想要一个纯基于 css 的解决方案，那么它可能有点困难，也没有多少浏览器兼容。尽管您可以通过使用名为display:table ;and的 css 属性来实现这一点display:table-cell;。再次使用较旧的浏览器，也许 IE-9 也无法呈现它。

那么你应该选择 jQuery 解决方案。您可以使用以下代码 -

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

谢谢。

于 2012-08-09T23:27:04.917 回答
0

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

参考：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 中它具有固定的宽度。所以我没有在我的代码中应用宽度。

于 2012-08-09T23:47:43.103 回答