Question

我已经搜索了几个小时并尝试了我找到的所有内容，但没有任何帮助，所以这里有。我正在尝试设置一个网站，其左侧列和右侧列都是宽度为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%;
}

Answer 1

您可以尝试使用绝对位置并为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

希望有所帮助

Answer 2

查看我的回答here，帮助有同样问题的人。有一个JSFiddle包括

Answer 3

根据您的问题确切地说您希望最终产品看起来是什么样的，但根据您的三栏方法并尝试让您的利润正常工作尝试浮动所有三个列，这样就不是肯定的了，如此

  <!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>

Answer 4

如果您将div设置为display: inline-block;而不是display: block;，则可以解决您遇到的问题。请注意，这可能会对您的代码产生其他影响。我也会使用一个涉及position: absolute;的解决方案，因为当你有其他元素与它/它们相互作用时，这可能会变得混乱。

我确信有一种涉及box-sizing: border-box;的方法，但我现在似乎无法解决这个问题。

宽度100％不与边距混合

4 个答案: