5

更新：私はこのデザインを達成するのを手伝ってくれる人に50の賞金を授与しています。

だから私はこれを修正するために過去2〜3時間努力してきましたが、それを行うことができないようです。たぶんCSSやjqueryの経験がある人が私を助けてくれるでしょう。私はこれを達成しようとしています。これが私の結果です。問題は、ブラウザウィンドウのサイズを変更すると、列Bのコンテンツが途切れ、列Aの左側に余分な空白があることです。これは時間を節約するためのスクリーンショットです。

CSS：

#public {
  width:100%;
}
#public #container {
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
  min-width:1050px;
}
#public .left {
  float:left;
  width:40%;
  height:100%;
  background-color:#fff;
}
#public .left .content {
  float:right;
  width:365px;
  margin-top:20px;
  text-align:center;
}
#public .left .platforms {
  margin-top:40px;
}
#public .left .aila {
  display:block;
  margin-top:25px;
}
#public .left .copy {
  margin-top:20px;
  color:#171515;
  font:bold 12px Arial, Verdana;
}
#public .right {
  float:right;
  width:60%;
  height:100%;
  overflow:hidden;
}
#public .right .content {
  float:left;
  width:665px;
  min-height:704px;
  margin-top:20px;
  background:url(images/public-right-shadow.png) no-repeat left top;
}

HTML：

<div id="public">
  <div id="container">
    <div class="left">
      <div class="content">
        <img src="images/logo2.png" alt="" class="logo" />
        <img src="images/supported-platforms.png" class="platforms" />
        <div class="copy">&copy; all right reserved 2012</div>
      </div>
    </div><!--.left-->
    <div class="right">
      <div class="content">
      Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. 
      </div>
    </div><!--.right-->
  </div><!--#container-->
</div><!--#public-->
4

3 に答える 3

2

同じ出力を複製していないようですが、問題は両方のコンテンツクラスオブジェクトの幅の値にあるようです。2つの比較的サイズの大きいオブジェクトがあり、特定の値はウィンドウサイズの40％と60％です。 、ただし、これらの内部には、絶対幅の値（365pxおよび665px）があります。スクリーンショットの解像度は1,076px×784pxであるため、これは、右側の列#public.rightが幅の約600+-pxでカットされることを意味します。ただし、その中に665pxの幅を入れています。これは、ほぼ確実にラッピングオブジェクトをオーバーフローします。そのため、暴走したテキスト用の有効なスペースを作成します。あなたのあふれているテキストの問題については、私はそこで問題を探します。

#public .leftの左側に余分なスペースがある場合、これはおそらく、コンテンツを右側にフローティングしているために発生します。

しかし、私が言ったように、私は同じ結果を複製することはできません。それで、それをいじくり回してもあなたの問題が解決しない場合は、遠慮なくもっと尋ねてください。

編集：あなたが1030pxの幅をサポートしているにもかかわらず、あなたの右側の問題に

最小幅：1050;

あなたの

public .right

最大630でそれから取得しますが、その中であなたは665pxにフィットしようとしています

このコードはあなたの問題を修正するはずです

#public .right .content {
  /* change padding value to whatever feels right */
padding-right: 10px;
float:left;
 /* this loses the fixed size though */
width:100%;
min-height:704px;
margin-top:20px;
background:url(images/public-right-shadow.png) no-repeat left top;
 }
于 2012-10-13T21:59:54.270 に答える
1

私はあなたのためにいくつかの簡単な調整を行いました、そして私が知る限り、あなたがあなたの質問に添付した画像に従ってそれが機能していると言うことができます。http://joshdavenport.co.uk/staging/swd/を参照してください。

違いは次のとおりです。

#public #container {
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;

    min-width: 960px;
}

このmin-width調整により、ページのサイズを縮小するときに、デザインを左にぴったりと合わせることができます。

#public .right .content {
    /* change padding value to whatever feels right */
    padding-right: 10px;
    float:left;
    /* this loses the fixed size though */
    min-height:704px;
    margin-top:20px;
    background:url(images/public-right-shadow.png) no-repeat left top;

    width: 510px;
    padding: 10px 40px;

}

ここwidthでは、この要素が常に同じ幅をpadding維持し、左側の領域から離れていることを確認します。あなたはおそらくこれを微調整したいと思うでしょう。

于 2012-10-18T13:05:10.160 に答える
0

これが私がこれを実装しようとする方法です。jQueryを使用して左右の高さを設定しています。また、マークアップを少し調整して、左右などの要素のクラスの代わりにIDを使用するようにしました。これにより、jQueryセレクターが高速になります。

CSS：

    /* apply a natural box layout model to all elements */
    * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

    html,
    body
    {
        width:100%;
        height:100%;
        margin:0;
        padding:0;
    }
    #public
    {
        width:100%;
        height:100%;
    }

    #public #container
    {
        min-width:1050px;
    }

    #public #left
    {
        float:left;
        width:40%;
    }

    #public #left .content
    {
        margin-top:20px;
        width:365px;
        float:right;
    }

    #public #left #logo img
    {
        max-width:100%;
        background-color:#e5e5e5;
    }

    #public #left #platforms
    {
        background-color:#888;
        height:30px;
    }

    #public #right
    {
        float:left;
        width:60%;
        background-image:url(images/bg_public.jpg);
    }

    #public #right .content
    {
        height:100%;
        padding:20px;
        background:url(images/public-right-shadow.png) no-repeat left top;
    }

HTML：

<div id="public">
  <div id="container">
    <div id="left">
      <div class="content">
        <div id="logo"><img src="images/logo2.png" alt="" /></div>
        <div id="platforms"><img src="images/supported-platforms.png" /></div>
        <div id="copy">&copy; all right reserved 2012</div>
      </div>
    </div><!--.left-->
    <div id="right">
      <div class="content">
      Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. 
      </div>
    </div><!--.right-->
  </div><!--#container-->
</div><!--#public-->

jQuery：

$(document).ready(function(){
    var WindowResize = function(){
        var WindowHeight = $(window).height();
        $('#left, #right').css('height', WindowHeight);

    }

    WindowResize();
    $(window).bind('resize', WindowResize);
});
于 2012-10-18T12:51:20.230 に答える