关于DIV的调整问题

时间:2015-05-20 14:48:10

标签: html alignment

我最近在很长一段时间后回到了HTML。目前,我正在思考,因为在我设计时,那些并不像现在那么受欢迎。我目前仍然坚持一个简单的宽度。

这就是我页面中的内容:

<div class="parent">
    <div id="logo">
        <img src="images/logo-01.jpg" alt=""/>
    </div>
    <div id="social">
        <img src="images/blogger-01.png" alt=""/>&nbsp;<img src="images/email-01.png" alt=""/>
        <img src="images/facebook-01.png" alt=""/>&nbsp;<img src="images/foursquare-01.png" alt=""/><br>
        <img src="images/google+-01.png" alt=""/>&nbsp;<img src="images/instagram-01.png" alt=""/>
        <img src="images/linkedin-01.png" alt=""/>&nbsp;<img src="images/yelp-01.png" alt=""/><br>
    </div> 
</div>

<div class="parent">
    <div id="content1">
        <p>Poem-A-Day. Poem-a-Day is the original and only daily digital poetry series featuring over 200 new, previously unpublished poems by today's talented poets each year. On weekdays, poems are accompanied by exclusive commentary by the poets.  Don't pay attention to me.</p>
    </div>
    <div id="content2">
        <p>Testimony</p>
        <p>Request Proposal</p>
    </div> 
</div>

这是我的样式表(注意:父母的宽度故意留空:

*
    {
        font-family: "Century Gothic";
        margin: 0em;
    }

.parent
    {
        width: ;
    }

#logo
    {
        clear: both;
        float: left;
        font-size: 100%;
        left: 15em;
        padding: 1em 0em;
        position: relative;
    }

#social
    {
        float: right;
        font-size: 90%;
        padding: 1em 0em;
        position: relative;
        right: 15em;
    }

#banner
    {
        background: url(../../images/banner-01.jpg);
        background-size: cover;
        clear: both;
        padding: 10em 0em;
        position: relative;
    }

#content1
    {
        border-right: medium solid #7e8082;
        clear: both;
        float: left;
        font-size: 100%;
        left: 15em;
        position: relative;
    }

#content2
    {
        font-size: 90%;
        float: right;
        position: relative;
        right: 15em;
    }

以下是我正在处理的页面示例:http://www.ragnarok.ws

我们的想法是在徽标上加上边距。 content1和social&amp; content2 align,它在这里做。不幸的是,content1乱码乱了。如果我放入“宽度= 500px”之类的东西,它就会重新排列,但是我正在寻找的对齐方式被搞砸了。我怀疑我是在滥用家长班,但此刻我已经被围住了。

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

从第144行的main.css中删除此样式(左:15em;)。

#content1 {
/* left: 15em; */
}

并添加此样式

#content1 {
   border-right: medium solid #7e8082;
   font-size: 100%;
   margin: auto;
   position: relative;
   width: 55%;
 }