Question

已编辑

这是我更新的问题：我已经在我的网站上添加了一个链接，其中显示了确切的问题here第一个框的标题很短，因此不会推动其下方的两个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 min-width？

<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);
    }

尽管文本长度不同，我如何使我的div排成一行？

1 个答案: