3

我有一个带有图像面板和几个 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

谢谢！

在此处输入图像描述

编辑：

在此处输入图像描述

.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

与此页面上的许多其他解决方案不同，我的适用于所有半现代浏览器，包括 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;
}

互联网浏览器 6： 互联网浏览器 6

火狐 3.6： 火狐 3.6

于 2013-10-11T13:38:45.570 回答
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 回答
1

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

也许这会有所帮助：

clear:left;

在你的第二个 imagediv 之后。所以第三个 div 可以毫无问题地浮动。

于 2013-10-11T13:34:37.820 回答
0

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

于 2013-10-11T13:40:45.033 回答