對齊使用邊距旁邊的一個div：0自動

這是我第一次在這個論壇和生病嘗試儘可能清楚，我有一個問題，爲我自己創建一個小網站，特別是與標題。我試圖創建一個包含1024px中心（margin：0 auto;）的包裝的頁面，並且我想要2個div，在此包裝的兩側可以使用另一張圖片作爲背景。我現在的CSS看起來是這樣的：對齊使用邊距旁邊的一個div：0自動

body, html  
background: url(../images/bg.jpg); 
background-repeat: no-repeat; 
background-position: top center; 
margin: 0; 
padding: 0; 
} 
#wrapper 
margin: 0 auto; 
width: 1024px; 
} 
#header { 
width: 1024px; 
height: 254px; 
background-image: url(../images/header2.png); 
background-repeat: none; 
position: relative; 
} 
#header_right { 
width: 50%; 
right: 0; 
background-image: url(../images/header_right2.png); 
position: absolute; 
height: 254px; 
} 
#header_left { 
width: 50%; 
left: 0px; 
background-image: url(../images/header_left.png); 
position: absolute; 
background-position: right; 
margin-left: -512px; 
height: 254px; 
}

和我的HTML看起來像：

<body> 
<div id="header_right"></div><!--End header right!--> 
<div id="header_left"></div><!--End header right!--> 
<div id="wrapper"> 
<div id="header"></div><!--End header!--> 
<div id="content"></div><!--End Content!--> 
</div><!--End wrapper!--> 
</body>

什麼，我試圖完成是有繼續上左，右頭（包括頭使用不同的背景），在這種情況下，它確實在左邊工作，因爲即時通訊使用負邊距，因爲我使用50％的寬度和恰好一半的包裝（-512px），這個工程，但如果我會嘗試使用右邊的負邊距（margin-right：-512px），這會將右邊的頁面擴展爲512px，這不是我的目的。

我一直在谷歌搜索整天，但似乎無法找到任何答案我的問題，也試圖使3浮動divs：左，但無法弄清楚如何使1在中心的寬度爲1024像素，其餘100％的寬度，如果任何人都可以幫助我，這將非常感激。

親切的問候

來源

2012-10-24 Geo

考慮以後的文章中使用[的jsfiddle（http://jsfiddle.net）。調試和顯示結果更容易。 – ShadowScripter

感謝shadowscripter，下次再見！ – Geo

我不完全確定你想要它的樣子，但我會給它一個鏡頭。
如果我走了，也許你可以給我提供各種示意圖？

在任何情況下，下面給出的例子都沒有使用你的具體代碼，但它應該讓你知道它是如何完成的。

結果： first example

左，右頭是「無限的」，因爲他們總是充滿整個頁面的寬度。
中間的標題覆蓋了其餘的部分。如果您有背景圖片，則可以使用background-position來定位它們，以便它們與中間標題的左右邊緣對齊。

代碼| JSFiddle example

HTML

<div class='side_wrapper'> 
    <div class='left_header'></div><div class='right_header'></div> 
</div> 
<div class='header'></div> 
<div class='content'> 
    Content here 
</div>

CSS

.header, .side_wrapper, .left_header, .right_header{ 
    height: 100px; 
} 

.header, .content{ 
    width: 400px; 
    margin: 0 auto; 
} 

.side_wrapper{ 
    width: 100%; 
    white-space: nowrap; 
} 

.left_header, .right_header{ 
    width: 50%; 
    display: inline-block; 
} 

.left_header{ 
    background-color: blue; 
} 

.right_header{ 
    background-color: lightblue; 
} 

.header{ 
    position:absolute; 
    top: 0; 
    left: 50%; 
    margin-left: -200px; 
    background-color: red; 
} 

.content{ 
    background-color: green; 
    text-align: center; 
}

來源

2012-10-24 14:23:54 ShadowScripter

非常感謝，我刪除了以前的消息，因爲我已經找到了我以前的答案，我現在就可以開始工作，非常感謝！ – Geo

@GMolenaar太棒了！歡迎來到stackoverflow！ – ShadowScripter

你想要兩個標題出來的包裝和一邊吧？，如果im正確的，試試這個：

<body> 

<div id="header_left"></div><!--End header right!--> 
<div id="wrapper"> 
<div id="header"></div><!--End header!--> 
<div id="content"></div><!--End Content!--> 
</div><!--End wrapper!--> 
<div id="header_right"></div><!--End header right!--> 
</body>

和：

display: inline; float: left;

中的每個元素

（頭向左，頭向右，wrappper），並得到了切緣陰性的

來源

2012-10-24 13:14:50 Toping

嗨方舟，感謝您的答案，我試過了，但不會解決它，我應該離開寬度：50％壽？那3個div的定位呢？ – Geo

嘗試沒有位置和寬度... – Toping

嗨方舟，感謝您的快速反應，那沒有工作！最後一個問題是雙方不具有特定的寬度，應該是隻要頁面，包裝物上1,024像素設置，雙方都需要是「無限」（如寬度爲您的屏幕） – Geo

在你divs中使用float：left;這應該意味着，只要有足夠的空間的包裝內，他們將浮動彼此相鄰，例如 CSS：

#divWrapper 
{ 
width:500px; 
float:left; 
background-color:red; 
} 
#divLeft 
{ 
width:250px; 
float:left; 
background-color:blue; 
} 
#divRight 
{ 
width:250px; 
float:left; 
background-color:green; 
}

的Html

<div id "divWrapper"> 
    <div id = "divLeft">content here</div> 
    <div id = "divRight">content here</div> 
</div><!--this is the end of the wrapper div -->

一個用於操縱CSS真的好工具是Firefox中的Firebug https://getfirebug.com/

如果你想有一箇中心的div試試這個： http://jsfiddle.net/kzfu2/1/

來源

2012-10-24 13:27:44 anna

嗨！謝謝你的回答安娜，問題是，需要有3個div，只有一個固定寬度（1024px），兩側需要與頁面長一樣長 – Geo

嗨你是指高度或寬度長？我已經更新了這個小提琴http://jsfiddle.net/kzfu2/5/，以便包裝具有固定的寬度和divs裏面的百分比或中心div有一個固定的寬度與兩個div在側面http：///jsfiddle.net/kzfu2/6/ – anna

對齊使用邊距旁邊的一個div：0自動

回答

相關問題