在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中修復對齊

回答

相關問題