尽管文本长度不同，如何使div对齐？

Question

已编辑

这是我更新的问题：我在网站上包含一个链接，该链接在此处显示了确切的问题。第一个框的标题很短，因此不会将其下方的两个div（位置和价格）向下推得很远。 第二个框的标题稍长一些，因此按得更多。 第三个方框的标题最长，并且推入的次数超过方框1和2。

在这种情况下，我希望框＃1和＃2在其标题div上填充“空白”，以便将位置/价格div向下推（如框＃3）。 这必须是动态的，因为有时框1的标题最长。 我以为空白字符可能有用，但显然不行...

谢谢你的帮助！

此行下方是旧的我的网站上有一个列表项，其中包含一张图像和3个div（标题框，位置框和价格框）。

我感兴趣的行是标题框，主要是我希望它始终包含40个字符。 如果更少，我需要添加空白填充。

我将在下面发布整个列表代码，但这只是标题div：

<div class="titlebox">Exceptional House with a View</div>

该标题只有29个字符，但我希望将其视为40个字符 。我不在乎是否超过40 个字符 ，我只需要一个函数就可以用40个字符填充空格 。

这怎么可能？ 谢谢！

这是整个列表项：

<li class="list__item">
            <figure class="list__item__inner">
            <a class="divLink" href="http://www.testsite.com/BEE/info.html">
             <p class="vignette" style="background-image:url(http://www.fakesite.com/image2.jpg)"></p>
             <div class="titlebox">Exceptional House with a View</div>
       <div class="locationbox">BorrisVille</div>
     <div class="pricebox">Asking $349,000</div>
     </a>
</li>

Answer 1

您是否考虑过使用CSS最小宽度？

<div style="min-width: 200px;"></div>

为了回答您的问题，您也可以在Javascript / jQuery中创建一个方法，但这看起来/感觉很草率：

function maxOut() {
        var spacesNeeded = 40 - $('#myDiv').html().length;
        var spacer = '';
        for (var i = 0; i < spacesNeeded; i++) {
            spacer += '&nbsp;';
        }
        $('#myDiv').append(spacer);
    }