私はこのようなことをしようとしています:
幅が固定されていない 3 つの div があります。左 (赤) と右 (青) の領域は、コンテンツ (画像) とまったく同じ幅にする必要があります。左右の領域で幅が異なる場合があります。
中央の div には、div よりも大きくなる可能性があり、省略記号が必要なテキストがあります。
難点は、幅がわからないことと、javascript を避けたいことです。
私はこのようなことをしようとしています:
幅が固定されていない 3 つの div があります。左 (赤) と右 (青) の領域は、コンテンツ (画像) とまったく同じ幅にする必要があります。左右の領域で幅が異なる場合があります。
中央の div には、div よりも大きくなる可能性があり、省略記号が必要なテキストがあります。
難点は、幅がわからないことと、javascript を避けたいことです。
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/