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

您可以添加一个clearfix。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

删除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 回答
1

这可以通过CSS列实现，尽管浏览器支持有限（即 IE 直到 IE10 才支持 IE）。请参阅下面的演示或代码。

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 回答