1

私は数時間検索し、見つけたものをすべて試しましたが、何も役に立たなかったので、ここに行きます。左の列と右の列の両方の幅が200ピクセルで、中央の列が残りのスペースを占めるWebサイトをセットアップしようとしています。マージンライトが完全に無視されていることに気づきました。オーバーフローをテストしましたが、それもうまくいかなかったようです。確かに、私はオーバーフローを少し間違って行った可能性があります。とにかく、これが私のテストサイト、関連する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

widthを使用する代わりに、絶対位置を使用して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-25T22:28:52.633 に答える
0

ほぼ同じ問題を抱えている人を助けた私の答えをここで見てください。JSFiddleが含まれています

于 2012-09-25T22:17:41.363 に答える
0

最終製品を正確にどのように見せたいかという質問に基づいて肯定的ではありませんが、3列のアプローチに基づいて、マージンを適切に機能させるために、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>
于 2012-09-25T22:24:14.557 に答える
0

の代わりにを設定するdivと、発生している問題が解決する場合があります。ただし、これはコードに他の結果をもたらす可能性があることに注意してください。他の要素が相互に作用していると、これが厄介になる可能性があるため、私もこれを含むソリューションを使用する方法になります。display: inline-block;display: block;position: absolute;

ある方法がbox-sizing: border-box;あったと思いますが、今はうまくいかないようです。

于 2012-09-26T15:24:21.763 に答える