2

私の Web ページにはいくつかのタイルがあります。タイルを2列で表示したい。最初の 2 つのタイルの後、次の 2 つのタイルはそのすぐ下に配置する必要があります。高さが可変であるため、適切に機能させることができません。

これが私がこれまでに得たものです。

HTML:

<div class = "content" style="color:Red"> 
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
</div>
<div class = "content" style="color:green"> 
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
</div>
<div class = "content" style="color:black"> 
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
</div>
<div class = "content" style="color:blue"> 
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
</div>

CSS:

.content {
    border: solid 1px #C8C8C8;
    -moz-border-radius: 25px; 
    width :45%;
    height : auto;
    float:left;
    margin-left: 10px;
    margin-top:20px;
    box-shadow: 3px 3px 3px 0px #C8C8C8;
    cursor:pointer;
 }

http://jsfiddle.net/yKuBr/

4

6 に答える 6

3

クリアフィックスを追加できます。すべてのdivフロートをクリアしてフローを最初からやり直す要素。

http://jsfiddle.net/yKuBr/2/

于 2013-03-01T16:33:48.980 に答える
2

あなたの質問を理解できたかどうかわかりませんが、奇数番号のタイルとclear:left. あなたのフィドルを更新しました。

于 2013-03-01T16:31:09.050 に答える
1

可変サイズのコンテナーを使用して、ある種のタイリングを作成する場合は、Isotopeと呼ばれる優れた jQuery プラグインを使用することを強くお勧めします。

于 2013-03-01T16:35:23.890 に答える
1

これは、 CSS列を使用して実現できますが、ブラウザーのサポートは限られています (つまり、IE では IE10 までサポートされていません)。以下のデモまたはコードを参照してください。

CSS

.content {
    border: solid 1px #C8C8C8;
    -moz-border-radius: 25px; 
    margin-left: 10px;
    margin-bottom:20px;
    box-shadow: 3px 3px 3px 0px #C8C8C8;
    cursor:pointer;
    display:block;
    width:95%
}

.cols {
    -webkit-column-count:2;
    -webkit-column-gap:10px;
    -moz-column-count: 2;
    -moz-column-gap: 10px;
}

HTML

<div class="cols">
    <div class="content" style="color:Red"></div>
    <div class="content" style="color:green"></div>
    <div class="content" style="color:black"></div>
    <div class="content" style="color:blue"></div>
</div>
于 2013-03-01T16:47:55.123 に答える
1

float:leftを削除し、 display:inline-blockを追加します

それが役に立てば幸い！！

于 2013-03-01T16:39:53.323 に答える
1

あなたが探しているのは次のとおりだと思いますinline-block：

HTML

<div class = "content ib" style="color:Red"> 
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
</div>
<div class = "content ib" style="color:green"> 
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
</div>

など、CSS で:

.ib {
    float:none;
    display:-moz-inline-stack;
    display:inline-block;
    vertical-align:top;
}

ここでフィドルの修正版を見ることができます。

IE6 または 7 をサポートする必要がある場合はhasLayout、zoom. 詳細については、Robert Nymanによる優れた記事があります。

于 2013-03-01T16:47:25.020 に答える