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个现在正常行事的人是正确的。我也不能使用％。

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

从这里开始，您应该可以了解较小的款式，但如果您有任何疑问，请与我联系。

div内的间距

1 个答案: