1

我已经搜索了几个小时并尝试了我找到的所有内容，但没有任何帮助，所以就这样吧。我正在尝试建立一个网站，其左列和右列的宽度均为 200 像素，而中间列占用剩余空间。我注意到 margin-right 被完全忽略了。我测试了溢出，但这似乎也不起作用。当然，我可能做错了溢出位。无论如何，这是我的测试站点、相关的 CSS 和 HTML。

中间列的当前背景在缩放方面做得不好，所以我可能会将它换成其他东西。

网站： 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%;
}
4

4 回答 4

1

You can try using absolute position and specify the left and right for the divs instead of using width. 

#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;
}

This also has the advantage that any added margin,border or padding do not extend the divs making the whole become wider than the 100% of the page.

Heres a simple JSFiddle

hope that helps

于 2012-09-25T22:28:52.633 回答
0

如果您将您的设置div为display: inline-block;而不是display: block;，它可能会解决您遇到的问题。请注意，这可能会在您的代码中产生其他后果。不过，我会使用涉及的解决方案position: absolute;，因为当您有其他元素与之/彼此交互时，这可能会变得混乱。

我确定有一种方法涉及，box-sizing: border-box;但我现在似乎无法解决。

于 2012-09-26T15:24:21.763 回答
0

看看我在这里的回答，它帮助了有同样问题的人。包括一个 JSFiddle

于 2012-09-25T22:17:41.363 回答
0

根据您的问题，您希望最终产品看起来像什么并不积极，但根据您的三栏方法并试图让您的边距正常工作，尝试浮动所有三栏，就像这样

  <!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-25T22:24:14.557 回答