html - 修复 css 中的对齐方式

Question

我正在为我的大学使用 Bootstrap CSS 进行一个元素，但我一直在解决一些对齐问题。我想要实现的是将 Logo 向左对齐(获得 35% 的宽度)并将社交插件和注册和登录按钮向右对齐(获得剩余空间，即 65%)。

我现在面临的问题是一切都垂直对齐!下面提到了我到目前为止编写的代码。如果有人修复我的代码中的错误而不是提出新错误，我将不胜感激。

这是 HTML:

<div class="container">
    <div id="topBar">
        <div class="topLeft">Logo</div>
        <div class="topRight">
            <div class="socialPlugin">f t g</div>
            <div class="signUpIn">Sign Up/In</div>
        </div>
    </div>
</div>

这是 CSS:

#topBar {
    width: 100%;
}
#topBar .topLeft {
    width: 35%;
}
#topBar .topRight {
    width: 65%;
}
#topBar .topRight .socialPlugin {
    float: left;
}
#topBar. topRighht .signUpIn {
    float: right;
}

Demo

谢谢

Answer 1

撇开没有使用 Bootstrap 这一事实，您可以通过正确应用 float 并在必要时清除 float 来解决您想要的大部分问题。

#topBar {
  width: 100%;
  overflow: hidden;
  /* quick clearfix */
}
#topBar .topLeft {
  width: 35%;
  float: left;
  background: lightblue;
}
#topBar .topRight {
  width: 65%;
  background: #bada55;
  float: left;
}
#topBar .topRight .socialPlugin {
  float: left;
  width:50%;
}
#topBar. topRighht .signUpIn {
  float: right;
    width:50%;

}

<div class="container">
  <div id="topBar">
    <div class="topLeft">Logo</div>
    <div class="topRight">
      <div class="socialPlugin">f t g</div>
      <div class="signUpIn">Sign Up/In</div>
    </div>
  </div>
</div>