1
我将我的社交图标放置在屏幕的底部，然后将我的图像库置于屏幕中间，但社交图标移动到屏幕中间，图像库看起来像是重叠的我的社会图标，我不能定位它留在屏幕的底部Div互相重叠 - HTML
我每次添加新的东西到页面中，它往往会影响社会图标
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Images</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, inital-scale=1">
<link rel="stylesheet" type="text/css" href="reset.css"/>
<link rel="icon" type="image/png" href="images/ace.png"/>
<link rel="stylesheet" type="text/css" href="style.css" media="all"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href="example/imageStyle.css" rel="stylesheet" type="text/css" media="all" />
<link href="example/jphotogrid.css" rel="stylesheet" type="text/css" media="screen" />
<!--[if IE]>
<link href="jphotogrid.ie.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="example/jphotogrid.js"></script>
<script src="example/jflickrfeed.js"></script>
<script src="example/setup.js"></script>
</head>
<body>
<div class="header">
</div>
<span class="menu-Trigger" align="center" >☰ Menu</span>
<div class="nav-menu">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href=#>VIDEOS</a></li>
<li class="current"><a href="Images.html">IMAGES</a></li>
<li><a href=#>EVENTS</a></li>
<li><a href=#>TESTIMONIALS</a></li>
<li><a href="Contact.html">ENQUIRIES</a></li>
</ul>
</div>
<div class="main">
<ul id="pg">
<li>
<img src="http://farm4.static.flickr.com/3647/3435384001_9ed9864bb4.jpg" alt="DSC_0660">
<p>DSC_0660</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3311/3436188742_caaa28c689.jpg" alt="DSC_0698">
<p>DSC_0698</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3371/3436188466_418a0d8a06.jpg" alt="DSC_0668">
<p>DSC_0668</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3397/3436188128_5e503cefcd.jpg" alt="DSC_0704">
<p>DSC_0704</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3300/3436187796_4d228a5bde.jpg" alt="DSC_0699">
<p>DSC_0699</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3386/3435382439_68b5e3742b.jpg" alt="DSC_0602">
<p>DSC_0602</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3657/3436187288_e84058f54b.jpg" alt="DSC_0603">
<p>DSC_0603</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3405/3436187010_c731dea9a3.jpg" alt="DSC_0604">
<p>DSC_0604</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3403/3435381659_ea615ecf14.jpg" alt="DSC_0607">
<p>DSC_0607</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3570/3436186474_4e35487600.jpg" alt="DSC_0619">
<p>DSC_0619</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3339/3434101571_30f6f2bffd.jpg" alt="DSC_0620">
<p>DSC_0620</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3134/3434099407_32da82e761.jpg" alt="DSC_0590">
<p>DSC_0590</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3538/3434096369_e2de95b252.jpg" alt="DSC_0562">
<p>DSC_0562</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3348/3434093487_f5a5b8fdb3.jpg" alt="DSC_0544">
<p>DSC_0544</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3652/3434091639_dccdc6342a.jpg" alt="DSC_0541">
<p>DSC_0541</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3537/3434089449_cde6162fa7.jpg" alt="DSC_0532">
<p>DSC_0532</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3385/3434895530_4bf2857b49.jpg" alt="DSC_0531">
<p>DSC_0531</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3411/3434069355_7df0d65490.jpg" alt="Dog dogs">
<p>dogs</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3349/3434870890_3b51171084.jpg" alt="DSC_0693">
<p>DSC_0693</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3544/3434061033_ba1be12cce.jpg" alt="DSC_0691">
<p>DSC_0691</p>
</li>
</ul>
</div>
<section>
<div id="middle">
</div>
</section>
<div class="sI">
<div class="icons">
<a class="socialIcons" href="http://www.youtube.com" title="Subscribe on YouTube" alt="Arshdeep on YouTube"><img src="images/social/youtube.png"/></a>
<a class="socialIcons" href="http://www.instagram.com/ArshSoni" title="Subscribe!" alt="Arshdeep Soni"><img src="images/social/instagram.png" /></a>
<a class="socialIcons" href="http://www.facebook.com/MagicArsh" title="Arshdeep Soni on Facebook" alt="Facebook"><img src="images/social/fb.png" /></a>
<a class="socialIcons" href="http://twitter.com/ArshSoni" title="Follow Arshdeep on Twitter" alt="Twitter"><img src="images/social/twitter.png" /></a>
</div>
</div>
</body>
</html>
CSS：
<style type="text/css">
body {
background-color: black;
}
.icons {
text-align: center;
position:absolute;
bottom:0px;
left:0;
width: 100%;
border:2px solid red;
}
.main {
width: 700px;
margin: 0 auto;
text-align: left;
}
#middle {
height:100px;
}
</style>
的jsfiddle：https://jsfiddle.net/dzx9v25b/
你需要解释你在这里做什么。否则，你只是为他写标记，没有人从中学习。 – Rob