个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 12:55:28 26 4
gpt4 key购买 nike

如果不移动包含我名字的

标签，我就无法移动页脚右侧的 to 图标。关于如何执行此操作的任何想法......我只是想将图标上下移动一些，但

随之移动。

  <!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;
}

最佳答案

将 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 */
}

关于html - 如何在不移动页脚中的其他元素的情况下移动 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25873138/

26 4 0
文章推荐： c++ - 相同用户数据的 Lua 数组和面向对象访问
文章推荐： linux - linux内核如何区分连接套接字和监听套接字？
文章推荐： java - 我找不到我的 CLASSPATH 并且我确定如何设置它？
文章推荐： java - 为什么 RequestBody 不会绑定(bind)到我的 java 模型？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com