8

かなり高い解像度で最適に動作するサイトを構築しようとしていますが、解像度が低くなると可能な限り左にスライドします。

ここにコピーするコードすらわからないので、リンクは次のとおりです。

projects.thomasrandolph.info

私が必要としているのは、の左側がプラス数ピクセル#pageの右側で左にスライドするのを止めることです。#logoページの13.25em左側からです。

の左マージンをに設定しました#page。13.25emこれは正しいように見えますが、解像度が高くなると、ページが中央に配置されていないため、ページが奇妙に見えます。センタリングを維持しながら、ある時点でスライドを停止したい。

だから私は左側がこれよりも左に行かないようにしたい：

左揃え

ここで説明した2つの要素で純粋なCSSを使用してこれを実行できれば、私は非常に好むでしょうが、必要に応じてHTMLを追加できます。

私は長い間、この質問をする方法にさえ苦労してきました。質問をするか、この質問を編集して、質問の明確さを向上させてください。

アップデート：

これは、現在2つの解像度でどのように見えるかの画像です。

1920年

1920解像度

1280

1280解像度

これは、おおよそ以下の解像度でどのように見えるかを示す画像です1540。

最小左マージン

〜より高い解像度1540は、現在のように右にスムーズにスライドします。

4

3 に答える 3

7

私がやったことは、ラッパーを追加することでした#page。それは私が完璧な世界で望んでいることではありませんが、私はmin-margin完璧な世界（または少なくともmargin: min()）で望んでいます！

ラッパーで、左へのスライドを止めたい場所margin: 0 13.25em;に適用しました。両側の等しいマージンは、右にシフトせずに中央に配置されたままになります。パディングの代わりにマージンを使用したため、水平スクロールバーを表示せずに右側をブラウザからオーバーフローさせることができます。13.25em#page#page13.25em

それは良い修正のようです。私はもともとHTMLを追加せずにもっと「賢い」ものを探していましたが、これは十分に単純で、追加のマークアップの価値があるように見えるほど効果的であるようです。

于 2011-06-29T04:18:09.197 に答える
6

要素に境界線を使用しない場合は、それを使用して「最小マージン」を定義できます。

.center
{
margin: 0px auto;
border: transparent solid 30px;
}

PSこれは古い質問だと思いますが、OPも今月コメントしました。

于 2016-04-28T18:16:55.810 に答える
-1

クラスの中心に正確な幅と高さを与えます。次に、位置を絶対に設定します。width：400pxを設定するとします。と高さ：300px; センターの次のコードを試してください

.center
{
postion:absolute;
width:400px;
height:300px;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-150px;
}
于 2011-06-28T21:12:15.900 に答える