0

編集済み

ここに私の更新された質問があります: 私はここに正確な問題を示す私のサイトへのリンクを含めました. . 2 番目のボックスのタイトルは少し長いので、少し押し込みます。3 番目のボックスのタイトルが最も長く、ボックス 1 と 2 よりも多くのプッシュがあります。

この例では、ボックス #1 と #2 のタイトル div に「空白」を埋め込んで、場所/価格の div を押し下げる必要があります (ボックス #3 のように)。ボックス #1 のタイトルが最も長い場合があるため、これは動的である必要があります。空白文字が機能する可能性があると思ったが、どうやら機能しない...

助けてくれてありがとう！

この行の下は古い 私のサイトには、画像と 3 つのdiv (タイトルボックス、ロケーションボックス、価格ボックス) を含むリスト項目があります。

私が興味を持っている行はタイトルボックスです。主に、常に40文字を入れたいと思っています。少ない場合は、空白のパディングを追加する必要があります。

リスト コード全体を以下に掲載しますが、ここではタイトル div のみを示します。

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

このタイトルは 29 文字しかありませんが、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>
4

1 に答える 1

0

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);
    }
于 2015-01-14T20:09:10.650 に答える