两个 div 并排 — 一个在中间，另一个在右侧

Question

我正在Weebly上建立一个网站（我觉得这会不受欢迎，但我没有太多时间去做）。我希望该组织的徽标位于中间，社交按钮位于右上角，顶部和底部的边距为 5px。在 html 中，我有这个：

<div id="header">
    <div id="social">{social}</div>
    <div id="sitename">{logo}</div>
</div>

下面介绍了标头和站点名称 ID 的定义方式

#header {
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 100%;
}
#sitename a,
#sitename a:link,
#sitename a:visited {
    color: #484848;
    font-family: 'Raleway', sans-serif;
    font-size: 36px;
    text-transform: uppercase;
    background: url('teal_icons.png') -9999px -9999px no-repeat;
    margin: auto;
}
#social {
    float: right;
}

我尝试遵循这里的建议，但没有帮助。

任何帮助将不胜感激。

Answer 1

这可能会

有所帮助。

.CSS：

#header {
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 100%;
}
#sitename {
    color: #484848;
    font-family:'Raleway', sans-serif;
    font-size: 36px;
    text-transform: uppercase;
    margin: auto;
    text-align:center;
}
#social {
    float: right;
    text-align-right;
}
.clear { clear:both }

.HTML：

<div id="header">
    <div id="social">[FB] [TW] [IN] [..]</div>
    <div id="sitename">LOGO OF <br/> YOUR COMPANY</div>
    <div class="clear"></div>
</div>

Answer 2

尝试使用这个

#social {
    float: left;
    width: 200px; /*Your width here*/
}
#sitename {
    margin-left: 200px; /*Your width here*/
    margin-top: 5px;
    margin-bottom: 5px;
}
#header {
    overflow: hidden; /*If not do this margin top will not work*/
}

Answer 3

CSS

#header {
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 100%;
}
#sitename a,
#sitename a:link,
#sitename a:visited {
    color: #484848;
    font-family: 'Raleway', sans-serif;
    font-size: 36px;
    text-transform: uppercase;
    background: url('teal_icons.png') -9999px -9999px no-repeat;
    margin: auto;
}
#sitename:before {
  content:"";
  display:block;
  clear:both;
}
#social {
    float:right;
    margin:5px 0;
}

代码笔示例