2

我正在尝试复制以下目录：

您可以在此处查看我的尝试并查看问题：我不知道如何将章节标题限制在特定宽度，以免它们徘徊在页码上。width:250px我已经尝试过and之类的东西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

2

您应该使用p来包装文本而不是元素，span将一些固定宽度分配给pfloatleft

演示

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

.conts p {
    float: left;
    width: 500px;
}

.conts span {
    margin-top: 10px;
}

如果要position在行尾输入数字，请使用position: absolute;Wrapped inside position: relative;container。

演示 2

于 2013-09-08T04:06:14.767 回答
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 回答
0

尝试将 a 添加padding-right:100px;到内容和margin-right:-100px;浮动页码中。这应该确保完整的内容正确地保持一定的宽度，同时将您的页码拉出该空间并进入右边距。

于 2013-09-08T05:06:44.293 回答
-1

将所有章节包装到一个主 div 中。向左浮动，宽度为 80%（或任何可行的方法）。然后将您的页码包装到第二个 div 中，并根据您的边距以 20% 或更小的宽度将其浮动。确保你给你的 WRAPPER DIV（或你包装整个代码的任何 div）一个宽度或你分配给 DIVS 内部的宽度将不起作用。

于 2013-09-08T05:07:26.833 回答