在css中修复对齐

我正在为使用Bootstrap CSS的我的学院开发一个项目，并且我一直在修复一些对齐问题。我想要实现的是将徽标左对齐（获得宽度的35％），并将社交插件和注册&登录按钮向右对齐（获取剩余空间，即65％）。在css中修复对齐

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

下面是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

谢谢

来源

2015-06-19 Aditya Singh

，你为什么和引导困扰，如果你不打算使用的电网和其他布局组件提供？ – isherwood

你真的要求某人为你完成Bootstrap集成到你的代码中吗？您是否阅读过Bootstrap的正确类文档？ - http://getbootstrap.com/css/#grid-intro – Lee

我使用引导程序，因为我希望所有事情都能做出响应@isherwood –

它看起来像在大多数情况下，你”我刚刚在最后一次输错了你的css：

更改#topBar. topRighht .signUpIn到#topBar .topRight .signUpIn，这是我对your fiddle。

来源

2015-06-19 15:25:19 Aeolingamenfel

撇开该引导程序没有被使用最多的您想可以通过正确运用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>

来源

2015-06-19 15:28:03

一个不好的问题的好答案。 – isherwood

谢谢@Paulie_D这有帮助！这怎么可能是一个坏问题？ @ isherwood –

这是一个'坏'的问题，因为你有一个令人误解的标题。这个问题与Bootstrap无关。 –

在css中修复对齐

回答

相关问题