0

我对网页设计比较陌生，所以希望我在这里写的东西是有意义的。. .

我的页面上有三个部分。页眉、中间部分和页脚。在中间部分有三个 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; }
4

0 回答 0