0

モバイルファーストレスポンシブレイアウトをしようとしています。だから私のHTMLには

First - Middle Content
Then - Left Content
Then - Right Content

そして、すべてのコンテンツの下に、左から右に全幅に渡る情報の別のセクションがあります。

私はそれらを配置するposition:absoluteためにMiddle、Left、Rightに使用しdivています。私の問題は、メインdivの3が絶対に配置されているため、別のセクションがメインのコンテンツの下にあり、重なっていることです。どうすればこれを修正できますか？

私はここで働くフィドルを持っています。

4

1 に答える 1

1

基本的なフロートの例：http：//jsfiddle.net/UKKcq/11 基本的な表示：インラインブロックの例：http：//jsfiddle.net/UKKcq/19/

ここで考慮すべきことがかなりあります。

まず、2番目の例では、メインセクションのテキストが3つのdivすべての下から始まっていることに気付くでしょう。これは、それらがまだドキュメントのフローの一部であるのに対し、フロートを使用する場合はテキストが折り返されるためではないためです。

また、2番目の例では、divの間にスペースが表示されないように、div間のすべての間隔/改行を削除する必要がありました。これはインラインブロックで常に発生します。次のjQuery関数を使用して修正し、マークアップのすっきりを損なうことを回避します。

jQuery.fn.cleanWhitespace = function() {
            textNodes = this.contents().filter(
                function() { return (this.nodeType == 3 &&    !/\S/.test(this.nodeValue)); })
                .remove();
            return this;
        }
})();

$('INSERTPARENTDIVHERE').cleanWhitespace();

さらに、vertical-align:topデフォルトで最短div（この場合は中央）を使用する必要があり、他の2つの下部に揃えていましたdivs。

最後の考慮事項の1つはinline-block、ユーザーがブラウザーを使用してズームした場合、または何らかの理由で幅、パディング、境界線、またはマージンが変更された場合に、このようなレイアウトが壊れる傾向があることです。後者の要素は比較的制御できますが、ユーザーがズームしたときに次の行に落ちないようにするために（非常に見栄えが悪くなる可能性があります）、これを防ぐためwhite-space: nowrap;に親に適用することをお勧めします。div

于 2013-03-21T10:34:49.940 に答える