Html 如何移动div而不移动页脚中的其他元素_Html_Css

Html 如何移动div而不移动页脚中的其他元素

html css

Html 如何移动div而不移动页脚中的其他元素,html,css,Html,Css,如果不移动包含我名字的标记，我就无法移动页脚右侧的“到”图标。有没有关于我该怎么做的想法……我只是想将图标左右移动一些，但是会随之移动 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Tim Kennedy | Designer</title> <link href="CSS/main.css" rel="stylesheet" type="t

如果不移动包含我名字的标记，我就无法移动页脚右侧的“到”图标。有没有关于我该怎么做的想法……我只是想将图标左右移动一些，但是会随之移动

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


蒂姆·肯尼迪|设计师
标志图像













&抄袭；2014蒂姆·肯尼迪
@字符集“UTF-8”；
身体{
边际上限：0px；
右边距：0px；
边缘底部：0px；
左边距：0px；
颜色：#151515；
字体系列：“Gill Sans”、“Gill Sans MT”、“Myriad Pro”、“DejaVu Sans Condensed”、Helvetica、Arial、Sans serif；
背景色：#FFFFFF；
最大宽度：960像素；
}
#包装纸{
宽度：100%；
最小宽度：740px；
最大宽度：1000px；
右边距：自动；
左边距：自动；
}
#顶{
高度：95px；
边框：薄实线#000000；
}
#主导航{
浮动：对；
边缘顶部：50px；
右边距：150px；
}
#主导航ulli{
文字装饰：无；
显示：内联块；
浮动：左；
左边距：30px；
}
#主导航ul{
右边距：31px；
}
#apDiv1{
高度：70像素；
宽度：70px；
边缘顶部：15px；
左边距：45像素；
位置：绝对位置；
z指数：1；
边框：薄实线#000000；
}
#边栏{
宽度：25%；
边缘顶部：60像素；
显示：块；
左边距：10px；
边框：薄实线#000000；
浮动：左；
最小宽度：200px；
左侧填充：5px；
垫面：5px；
右侧填充：5px；
垫底：5px；
}
部分{
宽度：60%；
浮动：对；
文本对齐：居中；
边缘顶部：60像素；
}
#画廊{
列表样式类型：无；
边际上限：0px；
右边距：0px；
边缘底部：0px；
左边距：0px；
填充顶部：0px；
右边填充：0px；
垫底：0px；
左侧填充：0px；
}
#李画廊{
宽度：35%；
利润率最高：5%；
保证金权利：5%；
利润底部：5%；
左缘：5%；
浮动：左；
最小宽度：200px；
}
img{
最大宽度：100%；
}
页脚{
明确：两者皆有；
高度：34px；
填充顶部：10px；
边框：薄实线#000000；
垫底：10px；
}
#页脚p{
边缘底部：15px；
}
.社会偶像{
宽度：20px；
高度：20px；
边际上限：0px；
边缘底部：0px；
右边距：5px；
左边距：5px；
浮动：对；
}
#社交媒体{
边缘顶部：2倍；
}
页脚p{
文本对齐：居中；
}

设置

位置：相对到页脚和位置：绝对
到#社交媒体
，然后应用右键
和下键
将图标向左和向下移动
JSFiddle-
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 */
}

你可能在寻找<代码>位置：绝对< /代码>——考虑将来只向我们展示相关代码。你需要使用CSS来定位你的社交媒体图标和你想要的段落，考虑把你的段落指定为第一类。抱歉……第一次用户，谢谢你的提示。我对footer p标签和social media div应用了绝对值，并且在尝试移动其中一个时仍然同时移动了这两个标签。