我正在尝试做这样的事情:
我有三个没有固定宽度的 div。左侧(红色)和右侧(蓝色)区域的宽度应与其内容(图像)完全相同。左右区域可以有不同的宽度。
中心 div 将有一些文本,这些文本可能比 div 大,并且应该有一个省略号。
困难在于我不知道任何宽度,我想避免使用 javascript。
我正在尝试做这样的事情:
我有三个没有固定宽度的 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/