宽度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％不使用保证金 - 右

回答

相关问题