第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

如何將圖片移動(dòng)到底部?

如何將圖片移動(dòng)到底部?

至尊寶的傳說 2023-07-29 16:38:39
我該如何使我的圖像位于任何屏幕尺寸的底部,并且我還希望我的圖像位于人類的腳下,以便您必須向下滾動(dòng)才能看到現(xiàn)在是這樣的我希望它在所有屏幕尺寸的高度上都是這樣到目前為止我的項(xiàng)目代碼。我不介意是否也需要使用其他語言。.navigation,.activeBtn {    text-decoration: none;    color: black;    font-family: Arial, Helvetica, sans-serif;    font-size: 2vh;    margin-left: 20px;    font-weight: bold;}.activeBtn {    background-color: #e0e0e0;    padding: 15px;    border-radius: 25px;}.Lgo {    float: right;    clear: right;    height: auto;    margin-top: -70px;    width: 300px;    padding-right: 30px;    padding-top: 10px;}.seperationLine {    border: none;    height: 1px;    margin-top: 50px;    background-color: black;}nav {    margin-top: 50px;    margin-left: 50px;    width: 800px;}body {    background-color: lightblue;    /* for demonstrating purposes */}.footerText {    background-color: rgb(24, 24, 192);    color: white;    font-family: Verdana, Geneva, Tahoma, sans-serif;    width: 100%;    text-align: center;    padding-top: 20px;    padding-bottom: 20px;}<header>    <nav>        <a href="theCompany.html" class="activeBtn" class="navigation">The company</a>        <a href="services.html" class="navigation">Services</a>        <a href="referenceProjects.html" class="navigation">Reference project</a>        <a href="background.html" class="navigation">Our background</a>        <a href="contactForm.html" class="navigation">Contact us</a>    </nav>    <a href="theCompany.html" class="lgoLink">        <img class="Lgo" src="../images/sapsamaLogo.jpeg" alt="Logo">    </a>    <hr class="seperationLine"></header><div class="information">    <img src="../images/hans.png" class="hansTransparent" alt="hans"></div><footer>    <p class="footerText">        &copy; Tim Fredriksson 2020    </p></footer>
查看完整描述

1 回答

?
桃花長相依

TA貢獻(xiàn)1860條經(jīng)驗(yàn) 獲得超8個(gè)贊

如果您指示您的圖片而不是測(cè)試圖片(帶有鴿子),您將得到所需的結(jié)果。首先,您必須將所有內(nèi)容包裝在maindiv 中(沒錯(cuò))。接下來,設(shè)置height: calc (100vh - 128px)類的information,其中128px是 的高度header。并為圖片集margin-top: auto。有必要嗎?


body {

    background-color: lightblue; /* for demonstrating purposes */

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}


.main {

    display: flex;

    flex-direction: column;

}


header {


}


.navigation, .activeBtn {

text-decoration: none;

color: black;

font-family: Arial, Helvetica, sans-serif;

font-size: 2vh;

margin-left: 20px;

font-weight: bold;

}


.activeBtn {

background-color: #e0e0e0;

padding: 15px;

border-radius: 25px;

}


.Lgo {

float: right;

clear: right;

height: auto;

margin-top: -70px;

width: 300px;

padding-right: 30px;

padding-top: 10px;

}


.seperationLine {

border: none;

height: 1px;

margin-top: 50px;

background-color: black;

}


nav {

margin-top: 50px;

margin-left: 50px;

width: 800px;

}


.information {

    display: flex;

    flex: 1 0 auto;

    height: calc(100vh - 128px);

}


.information img {

    width: 300px;

    margin-top: auto;


}


footer {

    flex: 0 0 auto;

}


.footerText {

background-color: rgb(24, 24, 192);

color: white;

font-family: Verdana, Geneva, Tahoma, sans-serif;

width: 100%;

text-align: center;

padding-top: 20px;

padding-bottom: 20px;

}

<body>

<div class="main">

<header>

    <nav>

        <a href="theCompany.html" class="activeBtn" class="navigation">The company</a>

        <a href="services.html" class="navigation">Services</a>

        <a href="referenceProjects.html" class="navigation">Reference project</a>

        <a href="background.html" class="navigation">Our background</a>

        <a href="contactForm.html" class="navigation">Contact us</a>

    </nav>

    <a href="theCompany.html" class="lgoLink">

    <img class="Lgo" src="../images/sapsamaLogo.jpeg" alt="Logo">

    </a>

    <hr class="seperationLine">

</header>

<div class="information">

    <img src="https://static3.depositphotos.com/1000992/133/i/450/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg" class="hansTransparent" alt="hans">

</div>

<footer>

    <p class="footerText">

        &copy; Tim Fredriksson 2020

    </p>

</footer>

</div>

<body>


查看完整回答
反對(duì) 回復(fù) 2023-07-29
  • 1 回答
  • 0 關(guān)注
  • 185 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)