DIV + CSSレイアウトピクチャリスト（）

マップは常に画像のレイアウトとなり、先端を切っ、初心者が不慣れであってもよいです。私はカット列子に3行3列の一覧が表示されます次の画像は、2つの一般的なグラフのオプションについて説明します。

フロートレイアウト
表示：インラインブロックレイアウト

フロートレイアウト方法の観点ではまず、

フロートレイアウト

非常に単純な、私は通常、ULのliレイアウトを使用します

    <ul>
        <li><img src="./images/1.jpg"></li>
        <li><img src="./images/2.jpg"></li>
        <li><img src="./images/3.jpg"></li>
        <li><img src="./images/4.jpg"></li>
        <li><img src="./images/5.jpg"></li>
        <li><img src="./images/6.jpg"></li>
        <li><img src="./images/7.jpg"></li>
        <li><img src="./images/8.jpg"></li>
        <li><img src="./images/9.jpg"></li>
    </ul>

li要素は、その後、幅のそれぞれに与えられ、フローティング残されます。100/3 = 33.3％：各行は三つの画像を表示する場合、各画像の幅は、パーセンテージを使用して計算することができます。

li {
    list-style: none;
    float: left;
    width: 33.3%;/*三列图片排列*/
}

各タグのIMG幅は、高度に適応画像の変形を防止するために、リチウムの全幅を占め、100％に設定されています

li {
    list-style: none;
    float: left;
    width: 33.3%;/*三列图片排列*/
}

li img {
    width: 100%;
}

さて、効果を見てみましょう。

そして、どのように我々は違ったと思いますか？今回はリストが混乱しています。心配しないで、これは別の画像サイズからです。プロジェクトの写真の大きさの差が大きすぎる場合、それは1つの親要素の高さの死を与えられ、そして非表示を超えて設定することをお勧めします。適応性の高いの目的を達成するために、自動：画像は非常に異なるサイズでない場合でも、それはセット高さに推奨されます。

li {
    list-style: none;
    float: left;
    width: 33.3%;/*三列图片排列*/
    height: 100px;/*当图片尺寸不一的时候，设置一个高度*/
    overflow: hidden;/*超出隐藏*/
}

あ〜、私たちのニーズはほとんど

製品は、あなたが必要な場合があります。この時間は、最大画像と中央突破します

li img {
    position: relative;
    width: 100%;
    top: 50%;/*li高度的一半*/
    transform: translateY(-50%); /*再向上移动自身的50%*/
}

一部の学生ではなく、トップよりも、マージントップを使用して考えることがあります。これはノート、パーセンテージマージントップ及びマージン下、要素の高さの容器の一般幅ではなく、計算され、パディング共感であるべきです

ここでは、3枚の基本的な3行は、基本的なレイアウトは完了です。

親コンテナ浮動子要素の崩壊後、そして時には、この機能は真剣に私たちのレイアウトに影響します：注は、しかし、初心者には隠された問題を無視することができます。私たちは、テストを持って周りのUL要素であるdiv要素を追加します

.red{
    width: 100%;
    height: 30px;
    border: 1px solid red;
}
.blue{
    width: 100%;
    height: 30px;
    border: 1px solid blue;
}    
    
<div class="red"></div>
<ul>...</ul>
<div class="blue"></div>

.Blue要素は次の.red要素、それは存在しないような演技UL要素を見ることができます

原則に浮かぶ、ドキュメントフローのうち、浮遊後の要素はで見つけることができるからであるw3school CSSフロートと説明CSSフロートプロパティフロートここでそれらを繰り返す、ではありません。浮動を除去するための多くの方法がありますが、ここで追加することが推奨される擬似要素は後：浮動削除します

.clearfix:after{
    position: relative;
    content: '';
    display: block;
    width: 0;
    height: 0;
    visibility: hidden;
    clear: both;
}

<div class="red"></div>
<ul class="clearfix">...</ul>
<div class="blue"></div>

通常のパフォーマンスへの影響で見てみましょう

詳細コードスタンプ：http://runjs.cn/detail/fvcssbb7

表示：インラインブロックレイアウト

ほぼ同じレイアウトフロートが、我々はフロートする必要があります：左;置き換えて表示：インラインブロック;

li {
    list-style: none;
    display: inline-block;
    width: 33.3%;
    /*三列图片排列*/
    height: 100px;
    /*当图片尺寸不一的时候，需要设置一个最大高度*/
    text-align: center;
    /*内容居中*/
    overflow: hidden;
    /*超出隐藏*/
}

結果を見て、そこにギャップがあって、2行に押し上げ。それはどのように？-
を指し、具体的に、インラインブロック要素との間に隙間が存在するであろうことを注意Zhangxin徐のブログ。本明細書で使用する場合、フォントサイズ：0;要素との間のギャップを除去する方法

ul {
    width: 100%;
    margin: 0 auto;
    font-size: 0;
}

このように、私たちが望むものを完了しました。それは簡単ではありません
：詳細なコードが参照できるhttp://runjs.cn/detail/l867rsbv

次の記事：DIV + CSSピクチャリストのレイアウト（2）

著者の注意を〜

フロートレイアウト

表示：インラインブロックレイアウト

おすすめ