中心的內容與左頭中心

我不知道這將是我的問題的最佳稱號......中心的內容與左頭中心

好吧，我會告訴我想用一個簡單的圖片做的事：

enter image description here

問題：

我有我的內容爲中心，可以說這是980px寬。
現在，我的標題將會有一個標誌和一個菜單。
但是，我想我的標題爲只使用頂部的左側，如內容寬度的50％，然後延伸到視口的左側。我知道這是可能使用JavaScript並計算內容的左偏移量，並設置動態寬度div與左偏移量。

這是最好的方法嗎？我相信應該有另一種方式，但我想不出來。希望你們有比我更好的主意，因爲我調整窗口大小時會降低網站的性能。

來源

2013-04-05 silentw

我想一個負左邊距應在內部DIV工作。 – Mike 2013-04-05 15:42:41

@Mike請更好地解釋你的評論 – silentw 2013-04-05 15:46:00

你能改說你想要的嗎？這是不是很清楚... – 2013-04-05 15:46:30

也許有2 div s;一個在背景中，一個包含標誌？

http://jsfiddle.net/kUKyp/1/

來源

2013-04-05 15:55:06

多數民衆贊成在我腦海以及:) – trajce 2013-04-05 15:56:05

@trajce這是唯一的純CSS的方式，我能想到的。與此最難的部分是，內容是固定的寬度...偉大的思想認爲一樣:) – 2013-04-05 15:57:50

謝謝，它解決了我的問題：D – silentw 2013-04-05 16:17:42

我相信你所追求的是margin：auto在CSS中。這是非常簡單的：

把你的內容div在頁面上，固定寬度爲980px，如你所想，並設置保證金：自動。
將您的標誌和菜單div放入內容中。

下面是這個動作一個很好的例子：

http://bluerobot.com/web/css/center1.html

從上面的頁面的CSS代碼：

body { 
    margin:50px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */ 
    text-align:center; /* Hack for IE5/Win */ 
    } 

#Content { 
    width:500px; 
    margin:0px auto; /* Right and left margin widths set to "auto" */ 
    text-align:left; /* Counteract to IE5/Win Hack */ 
    padding:15px; 
    border:1px dashed #333; 
    background-color:#eee; 
    }

而且標記：

<body> 
    <div id="Content"></div> 
</body>

來源

2013-04-05 15:46:10

這不是我所追求的，我在標註的「動態寬度」之後，根據瀏覽器的寬度（請記住：該div沒有內容，只有背景色），將會展開或收縮。 – silentw 2013-04-05 15:49:45

所以你想把東西放入動態寬度div是你在說什麼？ – 2013-04-05 15:51:04

基本上，它就像標題來自顯示器的左側，但它只有標誌和菜單「內部」內容div。 – silentw 2013-04-05 15:52:38

使用Twitter白手起家流體佈局

<div class="row-fluid"> 
     <div class="span12"> 
      <div class="row-fluid"> 
        <div class="span6"> (6 for half of the width, number can be changed 1-12)      your logo and menu 
        </div> 
      your content 
      </div> 
     </div>

來源

2013-04-05 16:10:45

中心的內容與左頭中心

回答

相關問題