3

画像パネルといくつかの div 要素を含む Web ページがあり、同じ widthで、それぞれに画像が含まれています。

それらを間にスペースを入れずに2つのカスケード列に入れたい(パディングを除く)

画像コンテナー用の次の css コードがあります。

.imageContainer
{
    position:relative;
    margin:4px 4px 4px 4px;
    border:4px solid #333;
    float: left;
    display:inline-block;
    min-height: 40px;
    width: 48%;
}

これにより、列は画像 1 のようになりますが、列を番号 2 のようにする必要があります

ありがとうございました！

ここに画像の説明を入力

編集：

ここに画像の説明を入力

.pg-main
{
    float: left;
    width: 100%;
    padding: 0;
}
.entries
{
    float: left;
    width: 800px;
    padding: 8px 20px 0 0;
}
.entries p
{
    display: block;
}
.imageContainer
{
    position:relative;
    margin:4px 4px 4px 4px;
    border:4px solid #333;
    float: left;
    display:inline-block;
    min-height: 40px;
    width: 48%;
}
4

4 に答える 4

2

列を使用して考えられる解決策は次のとおりです。IE9 以前では機能しません。

フィドル: http://jsfiddle.net/YjHzd/

HTML

<div id="container">
    <div class="block" style="height:30px"></div>
    <div class="block" style="height:30px"></div>
    <div class="block" style="height:70px"></div>
    <div class="block" style="height:70px"></div>
    <div class="block" style="height:50px"></div>
</div>

CSS

#container {
    -moz-column-count:2;
    -webkit-column-count:2;
    column-count:2;
    height: 145px;
    width: 80px;
}

.block {
    width: 40px;
    background-color: red;
    margin: 0 0 5px 0;
}
于 2013-10-11T13:40:15.390 に答える
0

基本的にこれを行うには2つの方法しかありません。JavaScript を使用して要素の位置を決定できます。または、画像が含まれる 2 つの個別の列を作成することもできます。左右の列

于 2013-10-11T13:40:45.033 に答える