0

左側にボタン、右側にテキストの段落を含む Dojo タイトルペインがあります。テキストの段落に関してボタンを垂直方向に中央揃えにしたいと考えており、テーブルの使用を避けたいと考えています。IE7+ で動作するソリューションが必要です。なんとしてでも、私は Dojo 1.3.2 を使用しています (はい...古いことは承知しています)。タイトルペインは、ユーザーが開くことを決定するまで、最初は閉じられています。

タイトルペインのコンテンツの例を次に示します。

<div>
    <div style="float: left; margin-bottom: 5px; margin-right: 5px;">
        <input type="submit" name="access" id="access" value="Access" STYLE="font-size:8pt" />
    </div>
    <div style="float: right; margin-right: 5px;">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla placerat vulputate tortor, sit amet malesuada quam vulputate vel. In hac habitasse platea dictumst. Vivamus ut rutrum nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent rhoncus nisi vitae augue tincidunt elementum. Phasellus a lorem dolor. Aliquam erat felis, ultrices eget lacinia non, rutrum a massa. Mauris et est dui, ut rutrum orci. Curabitur pulvinar porta risus, ac lobortis lorem volutpat ut. Etiam fringilla hendrerit diam at faucibus. Donec condimentum lacinia sem, quis aliquet mauris tincidunt nec. Ut sit amet urna lectus, vel volutpat ipsum. Aliquam erat volutpat. Proin id orci sit amet turpis sagittis adipiscing nec nec enim. Maecenas vulputate, velit a commodo ultricies, nisl nisl tristique lorem, ut lacinia mauris felis eget velit. Vestibulum sit amet dictum tellus.</p>
    </div>
</div>

コンテナの高さがcssでハードコーディングされているソリューションがあることを知っているので、コンテナの高さがわからないことにも言及する価値があります。

4

1 に答える 1

1

私のソリューションは機能していますが、IE8+ でのみ動作しています (おそらく、私の ieTester が間違っているので、確認する必要があります)。HTML を少し変更する必要があります。

<div>
    <div style="margin-bottom: 5px; margin-right: 5px; display: table; ">
    <p style="display: table-cell; vertical-align: middle; width: 50px;">
            <input type="submit" name="access" id="access" value="Access" STYLE="font-size:8pt ;" />
        </p>

        <div style="float: right; margin-right: 5px; width: 300px;">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla placerat vulputate tortor, sit amet malesuada quam vulputate vel. In hac habitasse platea dictumst. Vivamus ut rutrum nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent rhoncus nisi vitae augue tincidunt elementum. Phasellus a lorem dolor. Aliquam erat felis, ultrices eget lacinia non, rutrum a massa. Mauris et est dui, ut rutrum orci. Curabitur pulvinar porta risus, ac lobortis lorem volutpat ut. Etiam fringilla hendrerit diam at faucibus. Donec condimentum lacinia sem, quis aliquet mauris tincidunt nec. Ut sit amet urna lectus, vel volutpat ipsum. Aliquam erat volutpat. Proin id orci sit amet turpis sagittis adipiscing nec nec enim. Maecenas vulputate, velit a commodo ultricies, nisl nisl tristique lorem, ut lacinia mauris felis eget velit. Vestibulum sit amet dictum tellus.</p>
        </div>
    </div><!-- display: table; end -->
</div>

まず第一に：

  1. それがどれだけ高いかを知るために、 inteoを含むものでラップdivする必要があります。pdivinput

  2. display: tableこのラッパースタイルを追加します。

  3. をラップする追加の要素を配置します。inputこの要素にはCSS float: left; width: somepxとが必要display:table-ceillです。

  4. with （あなたのテキスト）に与えることを忘れないでくださいwidth: somepx。divp

  5. CSSインライン スタイルの代わりにクラスを使用してみてください。

PS常にjsfiddleを置くことを忘れないでください：http://jsfiddle.net/jnCU4/

于 2013-02-26T08:48:20.803 に答える