亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何將圖片移動到底部?

如何將圖片移動到底部?

至尊寶的傳說 2023-07-29 16:38:39
我該如何使我的圖像位于任何屏幕尺寸的底部,并且我還希望我的圖像位于人類的腳下,以便您必須向下滾動才能看到現在是這樣的我希望它在所有屏幕尺寸的高度上都是這樣到目前為止我的項目代碼。我不介意是否也需要使用其他語言。.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貢獻1860條經驗 獲得超8個贊

如果您指示您的圖片而不是測試圖片(帶有鴿子),您將得到所需的結果。首先,您必須將所有內容包裝在maindiv 中(沒錯)。接下來,設置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>


查看完整回答
反對 回復 2023-07-29
  • 1 回答
  • 0 關注
  • 168 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號