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

Question

我想组织我的文章，使标题适合一个盒子，几乎就像出版商下面的缩进一样。如果我将最大宽度设置为 300 像素，它就可以工作；但我不希望定义宽度 - 它应该适合剩余的宽度。

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

如果我将最大宽度设置为 300 像素，它会起作用；但我不希望定义宽度 - 它应该适合剩余的宽度。

 <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/

希望能帮助到你！