关于 DIV 的对齐问题

Question

在很长一段时间的中断后，我最近回到了 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

我们的想法是让徽标和内容 1 和社交和内容 2 上的边距对齐，这里就是这样做的。不幸的是，content1 乱码乱七八糟。如果我输入类似“width = 500px”的内容，它会重新排列，但我正在寻找的对齐方式被搞砸了。我怀疑我在滥用父类，但我现在一头雾水。

非常感谢任何帮助。

Answer 1

从你的 main.css 的第 64 行删除这个样式（left:15em;）。

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

并添加此样式

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