html - 收缩包裹两个元素 - 一个留在一行，第二个包裹以适应剩余宽度

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/

希望对您有所帮助!