2

次の目次を複製しようとしています。

ここで私の試みと問題を確認できます。章のタイトルを特定の幅に制限して、ページ番号に迷い込まないようにする方法がわかりません。width:250pxやmargin-right:30px;などを試してみましpadding-right:30px;たが、役に立ちませんでした。

コードの一部を次に示します。

.conts {
    font-size:80%;
    text-align:justify;
    text-indent:-1em;
    margin-left:1em;
    margin-bottom:1.5em;
}

    <div style="text-align:center;font-size:80%">CHAP. IX.</div>
    <div class="conts"><span><em>Of the different Degrees of Virtue and Vice</em>, <em>and the methods of estimating them</em>. <em>Of Difficulties attending the practice of Virtue the use of Trial and Discipline in forming reasonable Beings to Virtue</em>, <em>and the Essentials of a good and bad Character</em>.</span><span style="float:right;">p. 200</span>
    </div>

どんな助けでも大歓迎です。

4

4 に答える 4

0

初め。このコード<span style="float:right;"> Page number here </span>をすべて に変更し<p>Page number</p>ます。次に、CSSを次のように変更します。

.entry {
    width: 450px;
    padding-left: 90px;
}
strong {
    font-variant:small-caps;
    font-weight:normal;
}
.conts {
    width:100%;
}
.conts span {
    float:left;
    width:80%;
    font-size:80%;
    text-align:justify;
    text-indent:-1em;
    margin-left:1em;
    margin-bottom:1.5em;
}

.conts p {
    float:right;
    width:10%;
    font-size:80%;
    margin-top: 0px;
}

<br clear="all"/>最後に、 の後に追加し<p>Page Number</p>ます。この助けを願っています:)

ここでデモを見る

于 2013-09-08T04:33:24.517 に答える