Question

如何在图像调整大小时进行调整，文本在调整大小时保持与图像相同的位置。页脚文本必须在列之间包含相同的空格。

这就是我现在所拥有的：

当图像变小时，文字不会停留在同一个地方，如何让文字保持在同一个地方？

这是我的代码：

HTML

<div id="header">
    <div class="container-fluid">

        <div class="row">
            <div class="col-md-6 logo">
                <!-- LOGO -->
                <a href="/" class="navbar-brand navbar-left">
                    <div class="logo"><img src="img/logo.png" alt="LOGO"></div>
                </a>
            </div>
            <div class="col-md-6" id="text">
                <h1>DELIVERING SPRING 2017</h1>
            </div>
        </div>

        <!-- VIDEO-->

        <div class="container" id="container">
            <div class="row">
                <div align="center" class="embed-responsive embed-responsive-16by9">
                    <video autoplay loop class="embed-responsive-item">
                        <source src="CannonStreet_Timelapse_1280.mp4" type="video/mp4">
                    </video>
                </div>
            </div>
        </div>

        <!-- FOOTER-->

        <section id="footer">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-2 left-col">
                        <p><a class="contacts" href="#">CONTACTS</a></p>
                    </div>
                    <div class="col-md-2 contact-person">
                        <h2>STUART LAWSON</h2>
                        <p>20 7409 8920</p>
                        <p>07870 555 930</p>
                        <p><a class="email" href="#">slawson@savills.com</a></p>
                    </div>
                    <div class="col-md-2 contact-person">
                        <h2>JOSH LAMB</h2>
                        <p>020 7409 8891</p>
                        <p>07976 988 486</p>
                        <p><a class="email" href="#">jlamb@savills.com</a></p>
                    </div>
                    <div class="col-md-2 contact-person">
                        <h2>SAM BOREHAM</h2>
                        <p>020 7710 7963</p>
                        <p>07917 635 465</p>
                        <p><a class="email" href="#">samb@gmreal.com</a></p>
                    </div>
                    <div class="col-md-2 contact-person">
                        <h2>DAN ROBERTS</h2>
                        <p>020 7710 7963</p>
                        <p>07801 143 909</p>
                        <p><a class="email" href="#">danr@gmreal.com</a></p>
                    </div>
                    <div class="col-md-2 right-col">
                        <h2><a class="info" href="#">info@theriverbuilding.com</a></h2>
                    </div>
                </div>
            </div>
        </section> <!-- END END FOOTER -->
    </div>
</div>

CSS

body {
    background: url("../img/background.jpg")no-repeat ;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}


/***HEADER**/

.logo img {
    margin: 40px 45px;
}

h1 {
    font-family: 'GothamMedium', sans-serif;
    position: absolute;
    right: 45px;
    top: 150px;
    font-size: 1.55em; /*19pt in psd*/
    color: #ffffff;
}

/***VIDEO***/

#container {
    padding-top: 200px;
}


/*** FOOTER ***/

.col-md-2 {

}

#footer {
    padding: 100px 45px 0;
}

.left-col {
    padding: 110px;
    margin-left: -75px;
}

.right-col {
    padding: 86px;
    position: absolute;
    right: 76px;
}

#footer p {
    font-family: 'GothamBook', sans-serif;
    color: #ffffff;
    font-size: 1.063em; /*13pt in psd*/
}

#footer .email {
    font-family: 'GothamBook', sans-serif;
    color: #ffffff;
    font-size: 1.063em; /*13pt in psd*/
}

#footer .contacts {
    font-size: 1.063em; /*13pt in psd*/
    font-family: 'GothamBook', sans-serif;
    color: #ffffff;
}

#footer h2 {
    font-family: 'GothamBook', sans-serif;
    font-size: 1.063em; /*13pt in psd*/
    color: #ffffff;
}

#footer a:hover {
    color: #0e6655;
    outline: none;
}

#footer .info {
    font-family: 'GothamMedium', sans-serif;
    color: #ffffff;
    font-size: 1.5em; /*15pt in psd*/
}

/***MEDIA QUERIES***/

@media(max-width: 400px){
    #header .logo img{
        margin: 15px 0 20px;
        height: 100px;
    }
    #header h1{
     font-size: 15px;
     text-align: center;
     margin-left: 0;
     margin-right: 0;
    }
    .left-col {
       padding: 0 0 0 0;
    }

    .right-col {
        padding: 0 ;
        font-size: 12px;
    }
}

@media(max-width: 768px){
    #header .logo img{
        margin: 15px 0 20px;
        height: 120px;
    }
    h1{
        font-family: 'GothamMedium', sans-serif;
        position: absolute;
        right: 45px;
        top: 165px;
        font-size: 1.55em; /*19pt in psd*/
        color: #ffffff;
    }
    #footer{
        text-align: center;
    }
    .info{
        padding-top: 50px;
    }
    .left-col {
        text-align: center;
        margin-left: 0;
        margin-right: 0;
        padding-top: 0;
    }
    .right-col {
        padding: 86px;
        position: absolute;
        right: 45px;
    }
}

@media(max-width: 1400px){
    .logo img {
        margin: 40px 45px;
    }
    h1 {
        font-family: 'GothamMedium', sans-serif;
        right: 45px;
        top: 150px;
        font-size: 1.55em; /*19pt in psd*/
        color: #ffffff;
        text-align: center;
    }
    #footer .info {
        font-family: 'GothamMedium', sans-serif;
        color: #ffffff;
        font-size: 1.5em; /*15pt in psd*/
        margin-left: -50px;

    }
    #footer .contacts {
        font-size: 1.063em; /*13pt in psd*/
        font-family: 'GothamBook', sans-serif;
        color: #ffffff;
    }
    #footer p {
        font-family: 'GothamBook', sans-serif;
        color: #ffffff;
        font-size: 1.063em; /*13pt in psd*/
    }
    #footer .email {
        font-family: 'GothamBook', sans-serif;
        color: #ffffff;
        font-size: 1.063em; /*13pt in psd*/
    }
    .right-col {
        padding: 86px;
        position: absolute;
        right: 45px;
    }
}

Answer 1

尝试把它放在你的CSS结尾：

#footer * {
      margin-left: 2%;
    }

Answer 2

我会设置课程＆＃34; row＆＃34;和＆＃34; md-col-6＆＃34;谎言：

.row {
width: 100%;
display: block;
position: relative;
}

.row .md-col-6 {
position: absolute;
top: 50px;
right: 100px;
}

所有这些因素都取决于您想要达到的位置。

调整大小时如何使文本保持相对于图像的相同位置？

2 个答案: