Question

我对网页设计比较陌生，所以我希望我在这里写作是有道理的。。。

我的页面上有三个部分。标题，中间部分和页脚。在中间部分有三个div，包括图像和文本，每个div占整个中间部分宽度的30％。当页面缩小到较小的尺寸时，页脚会碰到这个中间部分。当然，我希望页脚部分保持在底部并做出响应。

起初我让这三个div漂浮在左边，我认为这可能与页脚移动有关。但后来我将div更改为内联块。

我也试图澄清：两者。当我缩小页面时，页脚会继续向上移动。

希望我有意义，有人可以提供帮助。谢谢。

HTML:

<section class='mid-section'>
    <div class='one-third'>
        <a href='thai-tattoo.html'><img src='https://farm2.staticflickr.com/1528/26102511281_67fdc7c189_m.jpg' alt='Bangkok street'></a>
            <h3>HEADLINE</h3>
            <p>TEXT</p>
    </div>

    <div class='one-third'>
        <a><img src='http://gratisography.com/pictures/264_1.jpg'><h3>HEADLINE</h3><p>TEXT</p>
    </div>

    <div class='one-third'>
        <a><img src='http://gratisography.com/pictures/264_1.jpg'><h3>HEADLINE</h3><p>TEXT</p>
    </div>


</section>

<div class='bottom-section'>
    <div class='social-icons'>
<p > Follow us on the Web </p>
</div>
</div>

CSS：

.one-third  {
    width: 30%;
    display: inline-block;
    margin: 5% 0 0 2.5%; }

.one-third img {
    width: 100%;
    height: 300px; }

.one-third p {
    margin: 0.5em; }

.tattoo-text  {
    width: 60%;

    margin: 50px; }

.tattoo-h {
    font-size: 25px; }


.tattoo-pic {
    width: 60%;
    float: right;
    margin: 10px; }

.quaint-street-pic {
    width: 60%;
    float: left;
    margin: 10px;
    height: 300px; }


.social-icons {
    float: right;
    margin: 100px 100px 0 0; }

页脚部分被撞到它上面的元素

0 个答案: