Question

我正在制作一个简单的博客服务。

我将使用表单和PHP将每个新条目附加到包含我所有博客条目的文件中，该条目将被加载到我的主页面上。

现在的样子：

HTML：

<p class="title">Blog Post</p><br>
<pre class="body">
This is a long entry, full of lots of random gibberish that ultimately makes absolutely no sense.
I like cats, dogs, ostriches and peanut butter, combined that makes a Cadostrichutterpea,
and that's one amazing creature, if you ever come across one, take a picture for me.

If you manage to get me that picture i'll thank you a thousand times over, because i have
trouble putting my imaginations onto paper.
</pre>

<p class="title">Small Blog Post</p><br>
<pre class="body">
A Cadostrichutterpea was spotted today in Thailand.
</pre>

<p class="title">Blog Post</p><br>
<pre class="body">
This is a long entry, full of lots of random gibberish that ultimately makes absolutely no sense.
I like cats, dogs, ostriches and peanut butter, combined that makes a Cadostrichutterpea,
and that's one amazing creature, if you ever come across one, take a picture for me.

If you manage to get me that picture i'll thank you a thousand times over, because i have
trouble putting my imaginations onto paper.
</pre>

CSS：

p.title
{
    overflow: auto;
    text-shadow: 0 0 5px #ffffff;
    text-align:center;
    width: 500px;
    margin:0px auto;
    padding: 5px 5px 5px 5px;
    background: rgb(51, 51, 51);
    background-size: 1px 1px;
    font-weight: bold;
    position: fixed;
    left: 0; right: 0;
    font-family: sans-serif;
    font-size: 10px;
    color: bold;
    line-height:100%;
}
pre
{
    width: 500px;
    margin:0px auto;
    padding: 5px 5px 5px 5px;
    background: rgb(103, 103, 103);
    position: fixed;
    left: 0; right: 0;
    font-family: sans-serif;
    font-size: 12px;
    color: black;
    line-height:100%;
}

我希望它看起来如何：

我只是不确定如何制作它以使p / pre元素相互堆叠而不是叠加。

我可以添加一些换行符并尝试使用PHP来确定我需要多少休息时间，具体取决于条目的长度。

有没有更好的方法呢？

当我硬编码位置以查看它的外观时，当我向下滚动页面时所有元素都滚动，所以你看不到更多的元素而不是适合屏幕，有没有办法可以阻止它？

Answer 1

您使用position: fixed;定位所有元素，这就是为什么它们相互叠加并且不会按预期滚动的原因。

尝试删除position: fixed;。

请参阅 fiddle 。

我还删除了<br>标题之后的<p>元素，因为不需要这些元素。有关定位的详细信息，请参阅w3schools。

Answer 2

摆脱所有position:fixed。

在：

＆＃13;

p.title
{
    overflow: auto;
    text-shadow: 0 0 5px #ffffff;
    text-align:center;
    width: 500px;
    margin:0px auto;
    padding: 5px 5px 5px 5px;
    background: rgb(51, 51, 51);
    background-size: 1px 1px;
    font-weight: bold;
    position: fixed;
    left: 0; right: 0;
    font-family: sans-serif;
    font-size: 10px;
    color: bold;
    line-height:100%;
}
pre
{
    width: 500px;
    margin:0px auto;
    padding: 5px 5px 5px 5px;
    background: rgb(103, 103, 103);
    position: fixed;
    left: 0; right: 0;
    font-family: sans-serif;
    font-size: 12px;
    color: black;
    line-height:100%;
}

＆＃13;

   <p class="title">Blog Post</p><br>
    <pre class="body">
    This is a long entry, full of lots of random gibberish that ultimately makes absolutely no sense.
    I like cats, dogs, ostriches and peanut butter, combined that makes a Cadostrichutterpea,
    and that's one amazing creature, if you ever come across one, take a picture for me.
    
    If you manage to get me that picture i'll thank you a thousand times over, because i have
    trouble putting my imaginations onto paper.
    </pre>
    
    <p class="title">Small Blog Post</p><br>
    <pre class="body">
    A Cadostrichutterpea was spotted today in Thailand.
    </pre>
    
    <p class="title">Blog Post</p><br>
    <pre class="body">
    This is a long entry, full of lots of random gibberish that ultimately makes absolutely no sense.
    I like cats, dogs, ostriches and peanut butter, combined that makes a Cadostrichutterpea,
    and that's one amazing creature, if you ever come across one, take a picture for me.
    
    If you manage to get me that picture i'll thank you a thousand times over, because i have
    trouble putting my imaginations onto paper.
    </pre>

＆＃13;

后：

＆＃13;

p.title
{
    overflow: auto;
    text-shadow: 0 0 5px #ffffff;
    text-align:center;
    width: 500px;
    margin:0px auto;
    padding: 5px 5px 5px 5px;
    background: rgb(51, 51, 51);
    background-size: 1px 1px;
    font-weight: bold;
    left: 0; right: 0;
    font-family: sans-serif;
    font-size: 10px;
    color: bold;
    line-height:100%;
}
pre
{
    width: 500px;
    margin:0px auto;
    padding: 5px 5px 5px 5px;
    background: rgb(103, 103, 103);
    left: 0; right: 0;
    font-family: sans-serif;
    font-size: 12px;
    color: black;
    line-height:100%;
}

＆＃13;

   <p class="title">Blog Post</p><br>
    <pre class="body">
    This is a long entry, full of lots of random gibberish that ultimately makes absolutely no sense.
    I like cats, dogs, ostriches and peanut butter, combined that makes a Cadostrichutterpea,
    and that's one amazing creature, if you ever come across one, take a picture for me.
    
    If you manage to get me that picture i'll thank you a thousand times over, because i have
    trouble putting my imaginations onto paper.
    </pre>
    
    <p class="title">Small Blog Post</p><br>
    <pre class="body">
    A Cadostrichutterpea was spotted today in Thailand.
    </pre>
    
    <p class="title">Blog Post</p><br>
    <pre class="body">
    This is a long entry, full of lots of random gibberish that ultimately makes absolutely no sense.
    I like cats, dogs, ostriches and peanut butter, combined that makes a Cadostrichutterpea,
    and that's one amazing creature, if you ever come across one, take a picture for me.
    
    If you manage to get me that picture i'll thank you a thousand times over, because i have
    trouble putting my imaginations onto paper.
    </pre>

＆＃13;

博客系统 - 元素重叠

2 个答案: