Question

我想要一个包含4列的div。

每个列的内容都包含div（其中一些内容很大而一些内容较小）。

请不要向我解释，请看一下这张图片：

）

请帮助我实现这种布局。

提前谢谢你。

Answer 1

我想你可能有这个想法：

无标题文档。身体 { 宽度：100％; 高度：自动; } .mainColumn { 宽度：840px; 高度：自动; 保证金：0px auto; } .mainColumn ul { 保证金：0像素; 填充：0像素; } .mainColumn ul li { 列表样式类型：无; 宽度：200像素; 填充：0px 0px 0px 10px; 向左飘浮; } .colone { 保证金：10px 0px 0px 0px; 背景：#CCCCCC; } .clear { 明确：两者; }

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，Lorem Ipsum自此以来一直是业界标准的虚拟文本
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，Lorem Ipsum只是印刷和排版行业的虚拟文本。

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本

Lorem Ipsum只是印刷和排版行业的虚拟文本。
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是印刷和排版行业的标准虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，Lorem Ipsum自排版行业以来一直是业界标准的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，Lorem Ipsum自此以来一直是业界标准的虚拟文本
Lorem Ipsum只是假的

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，Lorem Ipsum只是印刷和排版行业的虚拟文本。自从16世纪Lorem Ipsum成为印刷和排版行业的虚拟文本以来，Lorem Ipsum一直是业界标准的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，Lorem Ipsum自从Lorem Ipsum成为印刷和排版行业的虚拟文本以来一直是业界标准的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，Lorem Ipsum自此以来一直是业界标准的虚拟文本，因为Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，Lorem Ipsum自此以来一直是业界标准的虚拟文本

Answer 2

我不完全清楚你的需求是什么，内容是否需要流向像图像这样的相邻列，或者你有4个带有静态内容的列div？

假设后者，您可以使列div的行为类似于table-cells：http://jsfiddle.net/wy4GR/

Answer 3

HTML代码：

<div id="main">
    <div class="columns">       
         <div class="innerDiv">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
        <div class="innerDiv">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
        </div>
    </div>

    <div class="columns">       
         <div class="innerDiv">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
        </div>
        <div class="innerDiv">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
    </div>
    <div class="columns">       
         <div class="innerDiv">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
        <div class="innerDiv">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
        </div>
    </div>

    <div class="columns">       
         <div class="innerDiv">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
        </div>
        <div class="innerDiv">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
    </div>
</div>

CSS代码：

#main {
    width: 100%;
    height: auto;
}

.columns {
    width: 21%;
    height: auto;
    float:left;
    margin: 1%;
}

.innerDiv {
    width: auto;
    background-color: #ccc;
    flot: left;
    margin:10px 0 0 0;
 }

工作演示：http://jsfiddle.net/GVLNW/1/

我怎么能有不同高度浮动的无序div？

3 个答案: