1

私の目標は、スライダーの幅を 1280px にして、ページの中央に配置することです。コンテンツの端の両側にオーバーフローを隠したいと思います。たとえば、コンテンツの中心が常にページの中心にとどまり、ブラウザーのサイズが変更されると両側が切り取られ、水平スクロール バーが表示されないようにしたいと考えています。

これを達成する簡単な方法はありますか？

4

2 に答える 2

1

最終的に、(少なくとも) Chrome、Firefox、および Safari で動作する、やや興味深いソリューションにたどり着きました。少しハックかもしれませんが、結果はクールでした。

だからここに私がしたことが.wrapperあり1280pxます: マージンは、すべてが発生する左マージンを0 auto 除きます。左余白は幅の半分に設定する必要があります。divこの場合、それは になります640px。ただし、左画面の外側にオーバーフローする必要があるため、負の数 (つまり-640px) に設定する必要があります。次に、画面が大きくなったときにその効果を逆にするために、画面をleft:50%正しい量に押し込みました。margin:0 autoが実際に機能するためには、を(または必要に応じて)positionに設定する必要があります。relativeabsolute

.wrapper { width:1280px;
           margin:0 auto 0 -640px; 
           position:relative; 
           left:50% 
         }

ただし、1つの問題
が見つかりました。負のマージンを使用しているため、画面またはブラウザー ウィンドウが小さすぎると見えない場所まで div が左に押し出されます。これが問題であり、うまくいかない場合はお知らせください。

于 2012-02-26T01:45:57.847 に答える
1

このcssクラスを追加

  .overflowbothsides{
  vertical-align: middle;
  margin: 0 auto;
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}

コードと例を含むソリューション ここにリンクの説明を入力

于 2016-05-19T07:38:33.770 に答える