CSS佈局問題邊框

我目前在下列網站工作爲客戶http://minta.jvsoftware.com/但我試圖使頂部和主容器div的底部邊框，看起來像這樣http://awesomescreenshot.com/0f8jdwn71基本上使邊界跨越到直到屏幕的末端（不要介意這個紅色應該和現在的邊框顏色相同）。CSS佈局問題邊框

我一直在想出一個解決方案，但到目前爲止我失敗了，我願意嘗試一個JS/jQuery解決方案，如果只用css實現它就太難了。

任何人都可以幫助我嗎？提前致謝！

來源

2011-08-29 javiervd

我想你可能應該檢討你的標記結構。如果你想擴展那個特殊的div，你需要填充和定位，而不是一個浮點數。據我所見，無論如何。 – Kyle

如果你可以把結構放在jsfiddle.net上，我可能會爲你做到這一點。 –

嗨，薩米爾這基本上是我得到的http://jsfiddle.net/KwYMU/我需要的是頂部和底部的邊界「strech」一直到屏幕的左側。 – javiervd

底部您可以通過帶有負邊距的純CSS實現此目的。

首先，你必須更新的CSS .container如下：

.container { 
    clear: both; 
    font-family: "Times New Roman",Times,serif; 
    margin: 124px auto 36px; 
    padding: 0; 
    width: 940px; 
}

現在包住主div的內容到另一個DIV並應用一些CSS是這樣的：

<div id="main" class="container clearfix" role="main"> 
    <div style="border: 1px solid red; margin-left: -2000px; padding: 8px 8px 8px 2000px;"> 
     <div class="content"> ... </div> 
     <div class="featured-image"> ... </div> 
     <div style="clear:both;"></div> 
    </div> 
</div>

這裏一個截圖幫你弄明白： enter image description here

來源

2011-08-29 09:29:55 Skorpioh

感謝您的輸入，我會盡力並讓您知道 – javiervd

偉大的工作！雖然我認爲如果分辨率足夠寬，邊界將不會一直向左邊，因爲您使用的是2000px，但現在應該是好的:) – javiervd

達到你想要的佈局，我認爲你必須把左邊的div容器旁邊，讓他們漂浮離開，並給這個div頂部的邊框，並用紅色

來源

2011-08-29 09:03:55

爲什麼你不使用「position：absolute」？在這種情況下，我猜想它是完美的解決方案。

<style> 
.topborder, 
.bottomborder { 
    position:absolute; 
    left:-100px; 
    width:150px; 
    height:3px; 
    background:#ff0000; 
    z-index:999; 
} 

.topborder { 
    top:-3px; 
} 

.bottomborder { 
    bottom:-3px; 
} 

#main { 
    position:relative; 
} 
</style> 

<div id="main" class="container clearfix" role="main"> 
    <div class="topborder"></div><div class="bottomborder"></div> 

    your content 

</div>

來源

2011-08-29 10:18:36 Nadin

我不能這樣做，因爲根據屏幕分辨率的不同，我不喜歡不知道左側有多少空間可用 – javiervd

CSS佈局問題邊框

回答

相關問題