マルチ列レイアウト全体ハックツアーなしの純粋なCSS（スイッチ）

その他 2019-06-25 07:29:28 訪問数: null

ます。http：//www.cnblogs.com/rubylouvre/archive/2009/07/15/1523683.htmlからの振替

私はいくつかの部分を理解するように、クロスブラウザのCSSとはありませんハックとマシュー・ジェームス・テイラーの同じ高さの列からの翻訳、いくつかのチューXinzheをよりよく理解するように、変更しました。

純粋なCSSを使用したマルチカラムレイアウト輪郭は簡単な作業ではありません作成して、このチュートリアルでは、多くの問題に焦点を当てたマルチカラムレイアウトで発生する、と我々は解決策を待っていたとして、その後、全体のツアーは使用しない、シンプルなテイク-allですイメージ、スクリプト、CSSハックと最も厳格なXHTMLの仕様を確認することができます。

問題の核心

、背景の一貫性のない高さに、各列リードの内容は、図のように均一ではありません。適応問題と背景は、本質的にコンテンツ（フロント2つのIE標準コンテンツ領域によってボックスモデル、白領域、境界領域、及び本文脈3つのフロントに、構成される境界領域を作る）です。すべてのカラムの高さは、カラムの最大高さに等しくなるように、カラムのそれらの短い高さを伸ばす方法について再変換？私たちは、各列の高さを知らないので、これは、確かに非常にトリッキーで、どの列最高を知る方法はありません。私たちは、単に原因不足の非常に高い程度に大きな空白、または損失のうちよりますが、それらのすべてを表示することはできませんいくつかの列の内容が発生したすべての列につながることができ、すべての列の明確な高さを与えることはできません！実際には、コンテンツの長さが動的であるため、各列の高さが動的です。私たちは、ネットワークを認識する必要があり、何の「固定」という言葉が存在しない、みんなのディスプレイの解像度ではない、すべて同じ、フォントサイズがコンテンツへの表示の高さに影響する同じツアーは、ないです。

コンテンツと背景の分離の実装

問題を解決する最初のステップは、それが解決することができる2つのより小さな、個別のセクションに分割高いです。したがって、我々は、DIVの対応するものが、今、背景を表示するために、コンテンツをロードするための1 DIVの対応一つである持っていました。この分離は、私はすぐに次のセクションで説明原因となった、それらを結合するためのより効率的な方法で様々な要素やその他を制御するために私たちを助けます。

浮動巣の使用は、問題のカラムの最高高さは解決します。

これは、同じ高さの複数の列を解決する鍵です。DIVの高さは列の最大高さに等しい列のすべてが含まれています。このDIVを作るための唯一の方法です。すなわち、容器内のすべてのカラムでは、容器は、カラムの高さの最大高さです。これは非常に有用な構造です。

この構造を使用するためには、すべてのツアーで動作します、我々は左または右浮動外側容器をしなければならないということである、と彼の息子のDIV要素は、各列の内容は重要ではありませんどの方向、浮動続い含まれています。それらの使用は、最大パディング容器の周縁と整列フローティング容器浮遊すると、自動的にサブ要素がフローティング含ん達成するために、その高さと幅を調整します。容器は、高さと幅を定義されている場合は、それは自動的には表示サブ素子の表示領域に対応するために自分自身を調整するサブエレメントのサイズによって変化しないであろう。しかし、IE6とIEの下のバージョンでは、要素を浮動子は、周辺要素を軟化させることができる。幸いIE7とIE8は、これは練習の基準を満たしていない正引用されています。

容器増加の背景を表示します

次のステップは、すべての周辺機器の容器の数が互いに内にネストされているように、追加のコンテナの総数を増加させ、せることである（元のプラスを新たに追加して、a）同じカラム：3。これらの3隻は、各列の背景を表示するために使用されました。、我々は、彼らがこれらのコンテナに移動し、列の元の背景を削除しますのでご注意ください。

新しいコンテナは、元の末梢血管内に設定するようにコード層の新構造、！

< DIV ID = "container3" > 
    < DIV ID = "にcontainer2" > 
        < DIV ID = "container1" > 
            < DIV ID = "COL1" >カラム1 </ DIV > 
            < DIV ID = "COL2" > 2列</ DIV > 
            < DIV ID = "col3という" >コラム3 </ DIV > 
        </ DIV > 
    </ DIV >
</ DIV >

新しいプレゼンテーションのコードは、新しい血管は、要素を浮かべています！

彼らはページの幅を埋めるように、すべての要素は、100％に、浮動コンテナの幅を残しました。背景色は、コンテンツDIVから取り出し、容器に添加されます。元は広いすべてのコンテナが実際に、100％に設定されている、注意してください、そのような必要性、容器の外側の浮動巣が内部支持子要素の大きなサイズに対応することができなければならないので！

＃1 container3 {     フロート：左 ;   / * 幅：100％; * /     背景：緑 ;} 
＃1にcontainer2 {     フロート：左 ;    / * 幅：100％; * /     背景：黄色 ;} 
＃1 container1 {     フロート：左 ;     幅：100％ ;     背景：赤 ;} 
＃1 COL1 {     フロート：左 ;     幅：30％ ;} 
＃1 COL2 {     フロート：左 ;     幅：40％ ;} 
＃1 COL3 {     フロート：左 ;     幅：30％ ;}

位置決めに容器を相対的に移動させることにより

それは、すべてのコンテナが一つだけの背景色を表示し、一緒に疲れている完璧で、我々は他の背景も表示させなければなりません。この目的のために、我々は同じラダーの配置のように、これらのコンテナを作るために相対位置を利用しなければなりません。これは、互換性のために、私たちは、CSSハックを使用する必要があり、W3Cとの負の技術の限界が、いまいましいボックスモデルIE5.5の矛盾を持つことができます。この文は、CSSハックを使用しないので、あきらめます。＃1にcontainer2が原因＃1にcontainer2満たさ＃のcontainer1に、30％だけ右に移動し、右端の列が右側とツアーから削除されたように、＃1 container1は、3つの列のTVドラマトップスましょう。そして、容器底部の＃のcontainer3の周縁部のほとんどが露出し、左の30％を暴露されます。我々は次に、最上部のコンテナ＃1 container1を動かし、40％が元を覆う第2層は、容器にさらされている右に移動し、左の40％が、一方のみ残り＃container1 100％-30％、露出します= 30％-40％、またのみ右端の列の上に列挙されたが、それは、左端のように提示されました。このように、背景にも、通常のありました！

プレゼンテーションコードに対応

#container3 {
    float:left;
    /*width:100%;*/    /*没有必要的代码被注释掉！*/
    background:green;
}
#container2 {
    float:left;
    /*width:100%;*/    /*没有必要的代码被注释掉！*/
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {    float:left;    width:30%;}
#col2 {    float:left;    width:40%;}
#col3 {    float:left;    width:30%;}

把各列的内容移回原来的位置上

由于最上层的那三列都是被整体往右往到(页面的)70%，我们再把它们都往左移回70%就是！最后，由于我们前两个背景容器都是被向右移动，移出了游览器，它们都与游览器的右边连在一起，我们可以设置最底层的背景容器的overflow来隐藏那些被移出的部分。

#container3 {
    float:left;
    /*width:100%;*/    /*没有必要的代码被注释掉！*/
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    /*width:100%;*/    /*没有必要的代码被注释掉！*/
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {    float:left;    width:30%;    position:relative;    left:70%;}
#col2 {    float:left;    width:40%;    position:relative;    left:70%;}
#col3 {    float:left;    width:30%;    position:relative;    left:70%;}

对列添加补白（内边距）

最后，我们对列增加补白，让每列显得大方一些，而不是密密麻麻地塞满一列。但是如果我们增加补白，可能有一些游览器的有病又犯了，在IE6和更低版本的 IE中，其怪异的盒子模型，会产生一些我们不愿看到的结果。如，一个 200px 宽 20px 补白的 box 在 IE 中被视为 200px 宽，在其他浏览器中则为正确的 240px。补白应该加在元素的宽度上。

不过放心，我们可以用完全不依赖于 padding 的方法来解决这个问题。相反，我们把列弄窄一点（列宽减去两侧的补白），之后用相对定位把它们移至正确的位置。例如，我们用了 2% 的补白，则 30% 的列将减至 26%，40% 的列减至 36%。用相对定位移回列时需谨记，现在列变窄了，所以当它们一起像最初那样左浮动时，每一个需要比上一个移动更远的距离。

 

完整的CSS

为了使布局保持在小宽度我在每个内容列增加了overflow:hidden; 这将切去超出列宽的东东，并阻止其干扰其他布局。重申一下，这只是 IE 的问题，其他所有浏览器会保持正确的布局，不管列内是虾米。如果你真想这样做，可以用 IE 条件注释只对 IE 写规则。

#container3 {    float:left;    background:green;    overflow:hidden;    position:relative;}
#container2 {    float:left;    background:yellow;    position:relative;    right:30%;}
#container1 {    float:left;    width:100%;    background:red;    position:relative;    right:40%;}
#col1 {    float:left;    width:26%;    position:relative;    left:72%;    overflow:hidden;}
#col2 {    float:left;    width:36%;    position:relative;    left:76%;    overflow:hidden;}
#col3 {    float:left;    width:26%;    position:relative;    left:80%;    overflow:hidden;}

整个案例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">  
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
        <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=12)"/>
        <meta http-equiv="Page-Exit" content="blendTrans(Duration=0.5)" />
        <title>Heroku和Morph AppSpaces：两个Rails托管的新解决方案</title>
        <style type="text/css">
             #header { 
                 background:#EBCC67; 
             }
             #footer {
                 background:#A9EA00; 
             }
            #container3 { 
                float:left; 
              /*  width:100%; */
                background:green; 
                overflow:hidden; 
                position:relative; 
            } 
            #container2 { 
                float:left; 
               /* width:100%; */
                background:yellow; 
                position:relative; 
                right:30%; 
            } 
            #container1 { 
                float:left; 
                width:100%; 
                background:red; 
                position:relative; 
                right:40%; 
            } 
            #col1 { 
                float:left; 
                width:26%; 
                position:relative; 
                left:72%; 
                overflow:hidden; 
            } 
            #col2 { 
                float:left; 
                width:36%; 
                position:relative; 
                left:76%; 
                overflow:hidden; 
            } 
            #col3 { 
                float:left; 
                width:26%; 
                position:relative; 
                left:80%; 
                overflow:hidden; 
            }
        </style>
    </head>
    
    <body>
        <div id="header">AppEngine在本周引起很大反响，它提供了一个简单易用的方法来运行Python写成的Web应用。但是Ruby社区并不需要看Google的脸色，它已经拥有了关于简单部署的解决方案。我们来看两个新的解决方案，它们均是基于Rails开发者使用的公用基础之上构建的。</div>
        <div id="container3"> 
            <div id="container2"> 
                <div id="container1"> 
                    <div id="col1">Column 1<br /><p>Heroku和Morph实验室是Ruby on Rails的托管提供商，提供运行Ruby on Rails应用的整套环境。和传统的托管商相比，他们并不仅仅是提供一个服务器给你，而且提供有趣的工具和接口来帮助你更加容易的工作，使你从繁重的安 装、配置、管理和保证服务器安全中解脱出来。两者皆是使用Amazon的EC2网格计算技术来运行应用，因此你可以毫不担心可伸缩性与性能问题。</p></div> 
                    <div id="col2">Column 2<br /><p>另一个被Heroku和Morph实验室所推崇的重要特性是无痛部署。部署一个新应用只需要几分钟而已：来看看Heroku的即时部署demo和Morph eXchange的6分钟部署demo，部署是多么简单。</p></div> 
                    <div id="col3">Column 3<br />两者所带来的是如此的相似。InfoQ采访了这两个项目的相关人员，有更多信息奉上。</div> 
                </div> 
            </div>
        </div>
        <div id="footer">James Lindenbaum阐述了Heroku的独有特性：
            <blockquote>
                Heroku无疑是Rails应用最简单的部署平台。只是简单的把代码放进去，然后启动、运行，没人会做不到这些。Heroku会处理一切，从版本控制到 自动伸缩的协作（基于Amazon的EC2之上）。我们提供一整套工具来开发和管理应用，不管是通过Web接口还是新的扩展API。
            </blockquote>
            Heroku的一个非常有趣的特性就是基于浏览器的开发环境。它参考了Gyre的开发经验，Gyre的开发者Adam Wiggins也是Heroku背后的一员。因此如果你希望快速修改和追加的话，只需要通过浏览器编辑正在运行的应用的源代码，并在修改后自动部署。当然，使用浏览器IDE并不是唯一访问Heroku服务的方法，还可以来看看Heroku的API和外部Git访问。
        </div>        
    </body> 
</html>

 

 

转载于:https://www.cnblogs.com/JoannaQ/archive/2013/02/10/2909692.html

おすすめ

転載: blog.csdn.net/weixin_33806300/article/details/93058502
おすすめ
ランキング
Oracleのクエリ重複フィールド
An error occurred when ssm used count to query data
【Leyes de la Naturaleza】La sabiduría de las multitudes
JavaWebの研究では、（13）を締結 - セッションの使用は、重複送信フォームを防ぎます
Firebase増加サインアップクォータ
[MyBatisフレームワーク]mybatis入門
ハートレスの世界
Djangoのインストールと使用について
[转] UiPath展開アーキテクチャ
mybatis-plusは楽観的なロック変更を使用します
アーカイブ
もっと
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)

コードワールド

© 2018 codetd.com