Question

如果不移动带有我姓名的

标签，我无法移动到页脚右侧的图标。关于我如何做到这一点的任何想法......我只想将图标向左和向下移动一些，但

随之移动。

  <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Tim Kennedy | Designer</title>
<link href="CSS/main.css" rel="stylesheet" type="text/css">

</head>

<body>
<div id="wrapper">
  <header id="top">
    <div id="apDiv1">Logo Image</div>

    <nav id="mainnav">
      <ul>
        <li><a href="index.html">Portfolio</a></li>
        <li><a href="pages/about.html">About</a></li>
        <li><a href="pages/contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>
  <aside id="sidebar">SideBar Content
    <h3>What I Do:</h3>
        <p>  
            Isdfndmsn sdfnsdf sdjksdfj ksdjksdf sjksfsd.
            sdflsdkflsdf.sdkfjksdfjfkds sdkfjsdkf skdfjksdfj sdkfjsdkfjsd skdfjskdfj skdfjskdfj skdfjskdfj skdfjskdjf.      
        </p>
    <h3>Work Status:</h3>
        <p>
            DFjkdsfj ksdjfksd skdfjksjdf ksdjfkdf ioeroew oeifodsf.  skdjfskdjf sdkfjsdkf skdfjksdjksd skd skdjksjd sdkjsd ksdjfksd ksdjds ksdshj.  ksdjfkk sdfkjsd ksdjfksd ksdjkds sdkjfkdsj skdjfkdsf sdkfjskdjf ksdjskdjf .
        </p>
  </aside>
  <section>
    <h2> Past Work:</h2>
    <ul id="gallery">
        <li>
            <a href="Images/dummy-images (1)/dummy-200x200-Circus.jpg">
                <img src="Images/dummy-images (1)/dummy-200x200-Circus.jpg" width="200" height="200" alt=""/>
                <p>Placeholder Image #1</p>
            </a>
        </li>
        <li>
            <a href="Images/dummy-images (1)/dummy-200x200-FairyLights.jpg">
                <img src="Images/dummy-images (1)/dummy-200x200-FairyLights.jpg" width="200" height="200" alt=""/>
                <p>Placeholder Image #2</p>
            </a>
        </li>
        <li>
            <a href="Images/dummy-images (1)/dummy-200x200-Glass.jpg">
                <img src="Images/dummy-images (1)/dummy-200x200-Glass.jpg" width="200" height="200" alt=""/>
                <p>Placeholder Image #3</p>
            </a>
        </li>
        <li>
            <a href="Images/dummy-images (1)/dummy-200x200-Map.jpg">
                <img src="Images/dummy-images (1)/dummy-200x200-Map.jpg" width="200" height="200" alt=""/>
                <p>Placeholder Image #4</p>
            </a>
        </li>
    </ul>
  </section>
  <footer>
    <div id="social-media">
        <a href="http://twitter.com"><img src="" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com"><img src="" alt="Facebook Logo" class="social-icon"></a>
    </div>
        <p>&copy; 2014 Tim Kennedy</p>
  </footer>
</div>
</body>
</html>


    @charset "UTF-8";
body {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    color: #151515;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    background-color: #FFFFFF;
    max-width: 960px;
}
#wrapper {
    width: 100%;
    min-width: 740px;
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
}
#top {
    height: 95px;
    border: thin solid #000000;
}
#mainnav {
    float: right;
    margin-top: 50px;
    margin-right: 150px;
}
#mainnav ul li {
    text-decoration: none;
    display: inline-block;
    float: left;
    margin-left: 30px;
}
#mainnav ul {
    margin-right: 31px;
}

#apDiv1 {
    height: 70px;
    width: 70px;
    margin-top: 15px;
    margin-left: 45px;
    position: absolute;
    z-index: 1;
    border: thin solid #000000;
}
#sidebar {
    width: 25%;
    margin-top: 60px;
    display: block;
    margin-left: 10px;
    border: thin solid #000000;
    float: left;
    min-width: 200px;
    padding-left: 5px;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
}
section {
    width: 60%;
    float: right;
    text-align: center;
    margin-top: 60px;
}
#gallery {
    list-style-type: none;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}




#gallery li {
    width: 35%;
    margin-top: 5%;
    margin-right: 5%;
    margin-bottom: 5%;
    margin-left: 5%;
    float: left;
    min-width: 200px;
}

img {
    max-width: 100%;
}

footer {
    clear: both;
    height: 34px;
    padding-top: 10px;
    border: thin solid #000000;
    padding-bottom: 10px;
}
#footer p {
    margin-bottom: 15px;
}
.social-icon {
    width: 20px;
    height: 20px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 5px;
    margin-left: 5px;
    float: right;
}
#social-media {
    margin-top: 2px;
}
footer p {
    text-align: center;
}

Answer 1

将position: relative;设置为页脚，将position: absolute;设置为#social-media并应用right和bottom将图标向左下移动。

JSFiddle - DEMO

<强> CSS：

footer {
    clear: both;
    height: 34px;
    padding-top: 10px;
    border: thin solid #000000;
    padding-bottom: 10px;
    position: relative;    
}
#social-media {
    margin-top: 2px;
    position: absolute;
    right: 20px;    /* set the value to move the icons over left */
    bottom: 10px;   /* set the value to move the icons over down */
}

如何在不移动页脚中的其他元素的情况下移动div

1 个答案: