Question

我想组织我的文章，所以标题适合放在一个盒子里，几乎就像缩进一样在发布商下面..如果我将最大宽度设置为300px，它可以工作;但我不希望定义宽度 - 它应该适合剩余的宽度。

-----------------BODY------------------
|                                     |
||-------------CONTAINER-------------||
||-PUPLISHER-----TITLE-fits remaining||
|||____________||width, text wrapped|||
||              |___________________|||
||___________________________________||
|_____________________________________|

如果我将最大宽度设置为300px，则可以正常工作;但我不希望定义宽度 - 它应该适合剩余的宽度。

 <div>
     <span style="display: inline-block;">
    content: one line no wrap, Stretches to fit text length;
     </span>
     <div style=" display: inline-block; max-width: 300px; " >
    content: block box, Stretches to fit remaining width, longer text is wrapped.
     </div>
 </div>

Answer 1

你可以在jQuery的帮助下实现这一点，如下所示，

$(function () {
var wrapperWidth = $('.wrapper').width();
$('.wrapper').children('.outer').each(function () {
    var mainWidth = $(this).children('.main').width();
    var sutraction = wrapperWidth - mainWidth - 4;
    // 4 is value of total border width i.e. blue and green border can be adjusted as per ur need
    $(this).children('.sub').css('width', sutraction);
});

}）;

http://jsfiddle.net/49Jpt/6/

希望它有所帮助！

收缩包裹两个元素 - 左边一个在一条线上，第二个包裹以适合剩余的宽度

1 个答案: