Question

我有一个带有图像面板和几个div元素的网页，具有相同的宽度，每个元素都包含一个图像。

我想将它们放入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号

谢谢！

enter image description here

编辑：

enter image description here

.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%;
}

Answer 1

与此页面上的许多其他解决方案不同，我的所有半现代浏览器都可以使用，包括IE 6,7,8,9; Firefox 3.6到29以及所有版本的Chrome。请参阅下面的截图。

如果它们具有固定宽度，如图所示，只需1）将您的盒子包装在另一个div中，并且2）执行以下操作：

这是JSFiddle：http://jsfiddle.net/SqQqZ/

HTML：

<div>
    <div id="leftBoxesBox">
        <div class="redbox"></div>
        <div class="redbox"></div>
        <div class="redbox" style="height: 15em"></div>
    </div>
    <div id="rightBoxesBox">
        <div class="redbox" style="height: 12em"></div>
        <div class="redbox"></div>
    </div>
</div>

CSS：

div.redbox {
    background: red;
    width: 10em;
    height: 5em;
    margin: 10px;
}

div#leftBoxesBox {
    position: absolute;
    left: 0;
    width: 12em;
}

div#rightBoxesBox {
    position: absolute;
    left: 13em;
    width: 12em;
}

Internet Explorer 6：

Firefox 3.6：

Answer 2

以下是使用列的可能解决方案 - 不适用于IE9或更早版本。

FIDDLE ：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;
}

Answer 3

请发布您的HTML，这会有所帮助。

也许这会有所帮助：

clear:left;

在你的第二个imagediv之后。所以第3个div可以没有问题地浮动。

Answer 4

基本上只有两种方法可以做到这一点。您可以使用Javascript来确定元素的位置。或者，您可以创建两个单独的列，其中包含图像。左右列

将div图片放置在2列布局中

4 个答案: