Question

我被传递了一个相当过时的网站，老实说这有点乱。所以目前我基本上只是想做基础知识，这很有挑战性！

有问题的网页在这里http://www.yourchesham.co.uk/online.htm

我正在尝试在

下添加杂志的历史版本

Previous Editions

部分，但我似乎无法将最底层内容移到页面上，这意味着加班文本将开始重叠。

我尝试过简单地使用<br><br>来推送页面内容，但这不起作用。主要代码块如下所示。不确定如何解决这个问题？

        <div id="apDiv19">
            <div align="center" class="style21">
                <h4>Support the Businesses <br />
                    that support <span class="style17">yourAmersham</span></h4>
                </div>
            </div>
            <div id="apDiv22">Registered in 'England and Wales' Company number 08280869</div>
            <div id="apDiv23">
                <h4>Our Latest Edition</h4>
                <div style="text-align:center;"><div style="margin:8px 0px 4px;"><a href="http://www.calameo.com/books/0052756020d65a0443ab5" target="_blank">Your Amersham Issue 51 October 2017</a></div><iframe src="//v.calameo.com/?bkcode=0052756020d65a0443ab5&mode=mini" width="480" height="300" frameborder="0" scrolling="no" allowtransparency allowfullscreen style="margin:0 auto;"></iframe><div style="margin:4px 0px 8px;"><a href="http://www.calameo.com/" target="_blank">Read more publications on Calaméo</a></div></div>

                <h4>Previous Editions</h4>
                <a href="http://en.calameo.com/read/00527560211169822a565" target="_blank">September Issue</a><br>
                <a href="" target="_blank">August Issue</a>
                <br>    <br>

                <!--        <div style="background-color: #333333; width: 524px"> -->

    </div>

Answer 1

问题不仅在于那个div，实际上几乎所有这些都是：）

所有的div都有固定的高度和绝对定位。这意味着它们不会移动或增长（尽管内容会像你看到的那样溢出div。）

要使布局随内容移动和增长，您需要更改从绝对定位到相对定位的所有内容。

或者，如果您只能在该页面中定位css，则可以更新底部div的绝对位置，以使其不受新内容的影响

将#apDiv14（即具有最新版本的版本，假定这是您要添加之前版本的版本）的高度更改为height:auto;
手动更改以下div的top值以适合您添加的新内容：#apDiv7，#apDiv9，apDiv10，apDiv18，{{ 1}}（可能还有其他人！）

它很乱，但网站本身也是如此！：）

html / css

1 个答案: