CSSアライメント：水平ブロック？

StackOverflow https://stackoverflow.com/questions/4184350

質問

私はCMSテンプレートに取り組んでおり、これがまったく可能かどうかを調べようとしています。私はネット上で何も見つけることができませんでした、多分私は間違ったキーワードを使用しただけです。

このモデルに与えられます：

http://img833.imageshack.us/img833/4979/alignmentmockup.jpg

<div> #1 左に位置合わせされた固定「バナー」コンテナです。

<div> #2 固定幅のある別の容器です。サイト全体を測定（スケール＃2）として使用して中心にすることになっていますが、 <div> #1 （スケール＃1）。

問題: ：ブラウザウィンドウが小さすぎる場合（サイズ変更、モバイルブラウザなど）、コンテナは <div> #1. 。 Z-Indexに応じて、そのうちの1つはもう1つの上にあります。

アプローチ1: ：同じz-indexの両方のコンテナ。 <div> #2 もっている margin:0 auto;
しかし それは彼らが重複するのを止めません。

アプローチ2: ：両方のスタイル position: relative; float: left; z-index: 10
しかし <div> #2もうウェブサイトセンターに並べられていません。

これは私が取り組んでいる修復されたテンプレートのバックエンドなので、必要に応じて追加のコンテナを追加することはできません。 HTML-Fileの一部にのみアクセスできます。 <body> ウェブサイトの始まりが機能します。したがって、別々に追加することしかできません <div>s（次のように <div> #1）しかし、ウェブサイトの残りの部分でそれらをカスケードすることはできません（ <div> #2).

別のアプローチのヒントは高く評価されました！

役に立ちましたか？

解決

あなたの問題は、CSSにdiv1の幅でdiv2に設定できる最小マージンがないことです。私はこれについての記事を少し前に読んだことを覚えていますが、Ron Adairによる良い解決策を見つけました。

http://www.iamron.com/downloads/min-padding.html

より複雑なソリューションが提示される完全な記事。その後、ロンは同じ結果を得るための彼のより簡単な方法をコメントします：

http://buildinternet.com/2009/10/purely-css-faking-minimum-margins

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top