Question

所以我正在构建我的网站，这就是我身体标签中的全部内容：

＆＃13;

   #social-media {
	    width: 175px;
	    margin-left: auto;
	    margin-right: auto;
	    padding-top: 10%;
    }
    #social-media img {
	    padding: 5px;
    }
    #social-media ul li {
	    display: inline;
    }

＆＃13;

    <div id="logo"></div>
    <div class="search">
      <form action="search.php" method="get">
      <input name="keywords" type="text" placeholder="Search for a movie!" autocomplete="off" size="40">
        <input type="submit" value="DRINK!">
      </form>
    </div>

    <div id="social-media"> 
    <img src="facebook2.png">
    <img src="twitter2.png">
    </div>

＆＃13;

我试图将社交媒体div固定在页面底部，无论用户在哪个设备上查看，是否可以在没有包装的情况下执行此操作？

Answer 1

如果您希望它始终显示在屏幕底部，请使用

#social-media {
    positioning: fixed;
    bottom: 0;
}

可以找到W3Schools的文档here

如果您想确保它始终位于实际页面的底部（在其他内容下方），请尝试：

#social-media {
    clear: both;
}

Answer 2

您似乎需要将div“绝对”放在底部，如下所示：

#social-media {
    width: 175px;
    margin-left: auto;
    margin-right: auto;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
}
#social-media img {
    padding: 5px;
}
#social-media ul li {
    display: inline;
}

<body>
<div id="logo"></div>
<div class="search">
  <form action="search.php" method="get">
  <input name="keywords" type="text" placeholder="Search for a movie!" autocomplete="off" size="40">
    <input type="submit" value="DRINK!">
  </form>
</div>

<div id="social-media"> 
<img src="facebook2.png">
<img src="twitter2.png">
</div>

</body>

如何在没有包装的情况下将div粘贴到页面底部？

2 个答案: