javascript - フローティング画像 css のみ

Question

このリンクはなしで可能javascriptですか? 私は学ぼうとしていcssますfloating layouts。cssフォーラムやこのサイトへのリンクを検索しましたが、これが良い解決策のように見えても、とでスキルを広げたいと思っていhtmlます。

Answer 1

を使用CSS3 Columnsすると、最新のブラウザーで同じ結果を簡単に実現できます。

jsbin の例: http://jsbin.com/ivumoq/1/edit

関連CSS

body > div {
   -webkit-column-count:3; 
   -webkit-column-width:200px;
   -moz-column-count:3; 
   -moz-column-width:200px
   column-count:3; 
   column-width:200px;
}

特定のメディアクエリに従って列数を定義することもできます。たとえば、ビューポートがそれよりも大きいときに 4 列を表示したい場合 >960px

@media all and (min-width:960px) {
    body > div {
        -webkit-column-count:4; 
        -moz-column-count:4; 
        column-count:4;
    } 
}

したがって、ブラウザのサイズ変更で石積みのリフローをエミュレートできます。

メディアクエリの例: http://jsbin.com/ivumoq/2/edit

それ以外の場合は、float を使用して、3 つのフローティング コンテナーを (3 つの独立した列として) 定義し、各コンテナーに画像の約 1/3 を配置する必要があります。

Answer 2

可能ですが、別の列が必要です。display: inline-block を使用すると、画像が適切に配置されず、フロートすると、行の最初の画像が最後の画像よりも高い場合に問題が発生します。私はそれをいじった：

http://jsfiddle.net/VeecS/

1 列の html:

<div class="col">
    <h2>Column1</h2>
    <img src="http://placehold.it/300X150" />
    <img src="http://placehold.it/300X320" />
    <img src="http://placehold.it/300X120" />
</div>

CSS:

.col {
    width:24%;
    padding: 10px 0;
    background: #f1f1f1;
    float: left;
    margin-right: 1%;
}

Answer 3

働くフィドル

HTML:

<div class="parent">
    <div class="left-col">
        <div class="small"></div>
        <div class="medium"></div>
        <div class="large"></div>
        <div class="large"></div>
        <div class="medium"></div>
        <div class="small"></div>
    </div>
    <div class="right-col">
        <div class="large"></div>
        <div class="medium"></div>
        <div class="small"></div>
        <div class="small"></div>
        <div class="medium"></div>
        <div class="large"></div>
    </div>
</div>

CSS:

.parent {
    width:400px;
    height:auto !important;
    background:yellow;
}
.left-col {
    max-width:200px;
    height:0 auto;
    width:200px;
    float:left;
    display:inline-block;
}
.right-col {
    max-width:200px;
    height:0 auto;
    width:200px;
    float:left;
    display:inline-block;
}
.small {
    width:190px;
    margin:10px;
    height:100px;
    background:green;
    display:block;
}
.medium {
    width:190px;
    margin:10px;
    height:200px;
    background:blue;
    display:block;
}
.large {
    width:190px;
    margin:10px;
    background:brown;
    height:400px;
    display:block;
}