0

100％の幅とグラデーションの背景を持つUIコントロールパネルを作成する必要があります。このコントロールパネルのUI要素の幅は1000pxで、中央に配置する必要があります。

しばらくの間、2つの要素があります。パネル（幅100％、グラデーションの背景）、グローバルラッパーパネルラッパー（幅1000ピクセル、透明な背景）は、「パネル」要素内に配置され、UI要素を含みます。

必要なすべてのブラウザで見事に機能しますが、論理的には1つである必要がある場合、2つのHTML要素を使用するのは本当に好きではありません。おそらく、固定幅（1000px）と自動パディングを備えた1つの要素「パネル」を使用して、左右のすべての空き領域をカバーすることができますか？（私の説明がおかしい場合はそれを示すために画像を作成しました:)）

ここに画像の説明を入力してください

可能です？

4

3 に答える 3

1

calc()この関数はブラウザにあまり準拠していませんが、使用できる可能性があります。

ここに簡単な例があり、互換性と使用法の詳細については、ここを参照してください。

* Firefoxで例を作成しましたが、他の場所ではテストしていません。

簡単なコード例として、以下に1つの解決策を示します。

div {
    width: 100px;
  background-color: blue;
  height: 100px;
  padding-left: calc(50% - 50px);
  padding-right: calc(50% - 50px);

}
于 2012-12-07T20:51:28.570 に答える
1

課題は、パディングが全幅に追加されるため、パーセンテージと固定幅を従来の意味でのパディングと実際に組み合わせることができないことです。

全幅が100％で、中央のコンテンツを500pxにしたい場合、パディングを計算することはできません。

box-sizingただし、CC3では、ボックスモデルの「どこに」パディングを配置するかを変更するために使用できます。

http://www.css3.info/preview/box-sizing/

残念ながら、未知の変数（100％幅のオブジェクトが含まれているコンテナーの幅）がまだ存在しているという理由だけで、それがあなたに望むものになるとはまだ思いません。

結局、過度の最適化という名目で、これらのソリューションを考えすぎることがあります。この場合、追加のdivは完全に許容できるようであり、おそらく適切な解決策です。

于 2012-12-07T20:54:05.143 に答える
0

なぜpaddingですか？

左右の余白をに設定するautoと、divが中央に配置されます。

だから設定するだけ

.panel{
    width:1000px;
    margin:0 auto;
}
于 2012-12-07T20:46:50.890 に答える