寬度100％不使用保證金 - 右

我搜索了幾個小時，並嘗試了一切，我發現了，但沒有任何幫助的搭配，所以這裏去。我試圖建立一個網站，其左列和右列的寬度都是200像素，而中間一列佔據了剩餘的空間。我注意到，保證金權利完全被忽略。我測試了溢出，但似乎也沒有工作。當然，我可能做了溢出位錯誤。無論如何，這是我的測試網站，相關的CSS和HTML。寬度100％不使用保證金 - 右

爲中間一列當前的背景只是不具有縮放做的很好，所以我可能會換它別的東西。

網站：http://mnslayer27.webs.com/bgtest.html

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Mnslayer27</title> 
    <link rel="stylesheet" type="text/css" href="Mnslayer27.css" /> 
     <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" /> 
</head> 
<body> 

    <iframe src="Main_Links.html" id="ml" frameborder="0" width="100%" height="1808"></iframe> 

<div id="left"> 
    <div id="right"> 
    <div id="column2"> 
     <div class="transbox"></div> 
     <div class="transtext"> 
     <h1>Text~</h1><br /> 
     </div> 
     sdtfghujikjuhygtfrdsfghjklhkgjhfdsdfghkn 
    </div> 
    </div> 
</div> 

<div id="column3"> 
    <h3>Pictures</h3> 
    <div id="pics"> 
    <img src="http://i195.photobucket.com/albums/z255/yukina17/letter%20r/rave%20master/Elie.jpg" border="0" width="100%" alt="Elie" title="Elie"></img><br /><br /><br /> 
    <img src="http://mnslayer27.webs.com/Sasuke%20Eternal%20Mangekyou.gif" border="0" width="100%" alt="Sasuke's Eternal Mangekyou Sharingan" title="Sasuke's Eternal Mangekyou Sharingan"></img> 
    <center><img src="http://mnslayer27.webs.com/Torch.gif" border="0" width="50%" alt="Torch" title="Torch"></img></center><br /><br /> 
    </div> 
</div> 

CSS: 
#left { 
    //overflow:hidden; 
    margin-left: 200px; 
} 

#right { 
    margin-right:200px; 
} 

div.transbox { 
    width:100%; 
    //width:auto; 
    height:180px; 
    margin:0px 0px; 
    background-color:#ffffff; 
    border:none; 
    opacity:0.6; 
    filter:alpha(opacity=60); /* For IE8 and earlier */ 
} 

#column2 { 
     position: absolute; 
     top: 120px; 
     //left: 200px; 
     overflow:hidden; 
    color: #000000; 
    float:left; 
    width: 100%; 
     height: 1688px; 
     //margin-left: 200px; 
     //margin-right: 200px; 
     border: none; 
     background-image: url("http://i246.photobucket.com/albums/gg106/mnslayer27/Ren-Winamp2.jpg"); 
    background-repeat: repeat-y; 
    background-attachment: scroll; 
    background-position: 0% 0%; 
}

來源

2012-09-25 user1693148

您可以嘗試使用絕對位置並指定div的左側和右側，而不是使用寬度。

#left { 
    position: absolute; 
    left: 0px; 
    width: 100px; 
    height: 100%; 
    background-color: #d0c0c0; 
} 

#right 
{ 
    position: absolute; 
    right: 0px;    
    width: 100px; 
    height: 100%; 
    background-color: #d0c0c0; 
} 

#centre 
{ 
    position: absolute; 
    left: 100px; 
    right: 100px; 
    height: 100%; 
    overflow:hidden; 
    background-color: #a0a0d0; 

    border: solid 2px black; 
    margin: 4px; 
    padding: 4px; 
}

這也具有的優點是任何添加邊距，邊框或填充不延長的div使得整體變得比頁面的100％寬。

繼承人一個簡單的JSFiddle

希望幫助

來源

2012-09-25 22:28:52 Dampsquid

我甚至不知道你可以絕對的位置左右。謝謝！這解決了我的問題。 – user1693148

看看我的回答here，幫助別人與幾乎完全一樣的問題。有一個的jsfiddle包括

來源

2012-09-25 22:17:41 Xhynk

不明白爲什麼，但是這並沒有爲我工作。不過，溼氣解決了它。 – user1693148

根據你想要什麼最終產品的樣子，但根據你的三個欄的方法，並試圖讓你的利潤的正常工作嘗試浮動所有三個你列的，像這樣的問題不積極

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Mnslayer27</title> 
    <link rel="stylesheet" type="text/css" href="Mnslayer27.css" /> 
     <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" /> 
     <style> 


div.transbox { 
    width:100%; 
    //width:auto; 
    height:180px; 
    margin:0px 0px; 
    background-color:#ffffff; 
    border:none; 
    opacity:0.6; 
    filter:alpha(opacity=60); /* For IE8 and earlier */ 
} 

.column1 
{ 
    float: left; 
    width: 200px; 
    margin: 0 100px 0 100px; 
} 

#column2 { 


    color: #000000; 
    float:left; 

     border: none; 
     background-image: url("http://i246.photobucket.com/albums/gg106/mnslayer27/Ren-Winamp2.jpg"); 
    background-repeat: repeat-y; 
    background-attachment: scroll; 

} 
#column3 
{ 
    float: right; 
    width: 200px; 
} 


     </style> 
</head> 
<body> 


<div class="column1"> 
    <iframe src="Main_Links.html" id="ml" frameborder="0" width="100%" height="1808"></iframe> 
</div> 


    <div id="column2"> 
     <div class="transbox"></div> 
     <div class="transtext"> 
     <h1>Text~</h1><br /> 
     </div> 
     sdtfghujikjuhygtfrdsfghjklhkgjhfdsdfghkn 
    </div> 

<div id="column3"> 
    <h3>Pictures</h3> 
    <div id="pics"> 
    <img src="http://i195.photobucket.com/albums/z255/yukina17/letter%20r/rave%20master/Elie.jpg" border="0" width="100%" alt="Elie" title="Elie"></img><br /><br /><br /> 
    <img src="http://mnslayer27.webs.com/Sasuke%20Eternal%20Mangekyou.gif" border="0" alt="Sasuke's Eternal Mangekyou Sharingan" title="Sasuke's Eternal Mangekyou Sharingan"></img> 
    <center><img src="http://mnslayer27.webs.com/Torch.gif" border="0"alt="Torch" title="Torch"></img></center><br /><br /> 
    </div> 
</div>

來源

2012-09-25 22:24:14 pat8719

我試過這個，但由於某種原因，中間一欄沒有顯示。 – user1693148

你是否改變了你的HTML標記，我爲列添加了一個新的div – pat8719

啊，我沒有。我剛剛嘗試過，出於某種原因，它與佈局混淆。 Damp能夠修復它，所以除非你願意，否則你不需要繼續提供幫助。我必須真正殺死代碼，所以我願意爲任何對未來有用的東西敞開心扉。 – user1693148

如果您設置div是display: inline-block;而不是display: block;，它可能會解決您遇到的問題。請注意，這可能會在您的代碼中產生其他後果。儘管如此，我還是會使用一種涉及position: absolute;的解決方案，因爲當其他元素與其他元素相互交互時，這會變得雜亂無章。

我敢肯定有涉及box-sizing: border-box;的方法，但我似乎無法工作了現在。

來源

2012-09-26 15:24:21

寬度100％不使用保證金 - 右

回答

相關問題