div内的间距

Question

经过很长时间，我距离完成我的第一次 html 练习只差一个 div，如果没有这个很棒的社区的支持，我将无法完成。

我现在唯一的问题是避免集群混乱，这是我的社交媒体 div。我需要链接的大小稍微小一些，然后放在 imgs 旁边（有一个空格），现在它们有点偏离。

此外，带有各自 img 的时事通讯部分正紧贴社交部分，不想给它喘息的空间。

任何想法都会受到深深的赞赏！ 最好的祝福

CSS 代码：

#contactUs{
position: absolute;
margin: 20px 0 0 700px;
}


   #social p{
color: #404040;
font-family: 'Quattrocento Sans', sans-serif;
font-size: 14px;
top: 5px;
padding: 0 0 0 20px;
line-height: 23px
    }

#social img{
float: left;
}

#social{
position: absolute;
top: 15px;
}

#news{
color: #404040;
font-family: 'Quattrocento Sans', sans-serif;
font-size: 14px;
bottom: 10px;
}

还有 HTML：

    <div id="contactUs">
        <h4 id="title4">GET IN TOUCH WITH US</h4>
        <img src="imgs/social.png">
        <div id="social">
            <p><a href="#">Facebook</a></p>
            <p><a href="#">Twitter</a></p>
            <p><a href="#">Google+</a></p>
        </div>

        <h4 id="news">NEWSLETTER SIGNUP</h4>
        <img src="imgs/email.png">
    </div>

值得注意的是，这个 div 对其他 2 个行为正常的其他 div 是正确的。我也不能使用 %。

Answer 1

您的原始代码充满了问题，因此结果证明只创建一些新代码会更容易。

我立即看到的一个问题是您对 ID 属性的错误使用。 ID 属性是唯一的，这意味着您不能为页面上的多个对象提供相同的 ID。如果要将多个对象组合在一起，请改用 class 属性。请记住，在您的 CSS 中，ID 表示为 #IDName，而类则表示为 .ClassName。作为初学者，您可能会发现只使用类更容易，但随着您的页面变得更大和更复杂，您会发现一个可能比另一个更有用。

现在，进入您的实际代码。我已尝试尽我所能重新创建您提供的屏幕截图的布局，但它缺少一些样式，例如字体颜色。我假设你可以自己解决这个问题，所以我可以专注于解释更重要的事情。

<footer>
    <div class="footColumn">
        <h4>24 HOUR CUSTOMER SERVICE</h4>
        <div class="inner">
            <img src="imgs/icon-phone.png" class="left">
            <p class="offset">512-943-1069</p>
            <p class="offset">512-943-1068</p>
        </div>
        <div class="inner">
            <img src="imgs/icon-email.png" class="left">
            <p class="offset"><a href="#">info@WTPcom</a></p>
        </div>
        <div class="inner">
            <img src="imgs/icon-address.png" class="left">
            <p class="offset">1341 Oakmound Drive</p>
            <p class="offset">Chicago, IL 60609</p>
        </div>  
    </div>
    <div class="footColumn">
        <h4>RECENT TWEETS</h4>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <p><a href="#">- 1 day ago</a></p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        <p><a href="#">- 2 days ago</a></p>
    </div>
    <div class="footColumn">
        <h4>GET IN TOUCH WITH US</h4>
        <img src="imgs/social.png" class="left">
        <p class="offset"><a href="#">Facebook</a></p>
        <p class="offset"><a href="#">Twitter</a></p>
        <p class="offset"><a href="#">Google+</a></p>
        <h4 class="news">NEWSLETTER SIGNUP</h4>
        <img src="imgs/email.png">
    </div>
</footer>

CSS：

footer{
    font-size:0;
}
.footColumn{
    display:inline-block;
    width:33%;
    font-size:12px;
    vertical-align:top;
}
.footColumn h4{
    font-size:14px;
}
.offset{
    padding:0px 0px 0px 30px;
    margin:0px 0px 10px;
}
.inner{
    padding:10px 0;
}
.left{
    float:left;
}

Here's a Fiddle

从这里开始，您应该能够修改较小的样式，但如果您有任何问题，请告诉我。