兩個div並排一個在中心，另一個在右邊

我在Weebly上建立了一個網站（我覺得這會讓人皺眉，但我沒有太多時間去做）。我希望組織的標識位於中心位置，右上角有社交按鈕，頂部和底部的邊距爲5px。在HTML中，我有這樣的：兩個div並排一個在中心，另一個在右邊

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

這裏是如何的標題和網站名稱IDS定義

#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; 
}

我想建議here以下，但它並沒有幫助。

任何幫助將不勝感激。

來源

2014-11-24 MiKenning

嘗試使用這個

#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*/ 
}

來源

2014-11-24 13:10:29

爲什麼工作？ – MiKenning 2014-11-24 13:16:34

float left表示該元素應該被推向左側並且其他環繞。 http://www.w3schools.com/css/css_float.asp – 2014-11-24 13:19:17

@ agu-f抓住了一個很好的觀點，需要清楚，因爲如果sitename的寬度不夠寬，標題之後的其他元素也可以包裝社交 – 2014-11-24 13:21:31

這可能會有幫助。

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>

來源

2014-11-24 13:17:24

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; 
}

Codepen example

來源

2014-11-24 13:24:13 Roughtron

兩個div並排一個在中心，另一個在右邊

回答

相關問題