0

私はこのようなことをしようとしています:

画像

幅が固定されていない 3 つの div があります。左 (赤) と右 (青) の領域は、コンテンツ (画像) とまったく同じ幅にする必要があります。左右の領域で幅が異なる場合があります。

中央の div には、div よりも大きくなる可能性があり、省略記号が必要なテキストがあります。

難点は、幅がわからないことと、javascript を避けたいことです。

4

1 に答える 1

2

HTML:

<div style="width:600px;"> <!-- 600px or the total desired width of the table -->
    <div class="column" style="border-color:red;">
        <img src="http://i.imgur.com/w57Lk.png" />
    </div>
    <div class="column" style="width:100px;">
        lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, 
        lorem ipsum dolor sit amet, lorem ipsum dolor sit amet
    </div>
    <div class="column" style="border-color:blue;">
        <img src="http://i.imgur.com/aPlq6.png" />
    </div>
</div>

CSS :

​.column {
    text-overflow: ellipsis;
    height:400px; /* or whatever */
    float:left;
    border:1px solid black;
    overflow:hidden;
    white-space: nowrap; 
}​

これは CSS3 を使用するため、ブラウザのサポートが制限される場合があります。


編集:

中央の列の希望の幅がわからない場合、少なくとも JavaScript がなければそれを行う方法がわかりません。幸いなことに、JS は非常に単純なはずです。jQuery を使用style="width:100px;"し、上記の HTML の一部を使用しない場合:

(function($) {
    var containerWidth = $('.column').parent().width()                         
        - $('.column:first').width() 
        - $('.column:last').width()
        - 6; //6 because the borders add 1px per side, per column
    $('.column:nth-child(2)').width(containerWidth);
})(jQuery);​

jsFiddle での作業デモ: http://jsfiddle.net/qPbfw/

于 2012-11-08T15:48:30.290 に答える