CSS Only用于水平定位嵌套单元格的方法

时间：2013-11-29 10:40:30

标签： html css css3

我有一个对象列表，并希望实现以下仅限CSS的定位方案：

enter image description here

这将是一个动态填充的列表，我们必须“组合”由4个小单元组成的较大单元（2x2，如图所示）。 我已经尝试过基于清除每个第4个元素之后的浮点数但没有成功的实现。我认为解决方案将成功地创建一个更大的单元格，该单元格由4个小单元组成，并且向左浮动。 任何小单元格都将基于固定的宽度/高度，是（例如，宽度：100px;高度：100px;）。解决方案必须是IE8 + 

<html>
<head>
    <style type="text/css">
        .smallCell {
            float: left;
            width: 100px;
            height: 100px;
            margin: 5px;
            background-color: #efefef;
            border: 1px solid #f00;
        }
        .smallCell:nth-of-type(5n){
            background-color: #f0f;
            float: left;
            clear: both;
        }
        .smallCellRow {
            width: 240px;
            height: 120px;
            margin: 5px;
            border: 1px solid #0f0;
        }
        .mainCont {
            float: left;
            height: 280px;
            max-height: 280px;
            background-color: #ffcfbf;
        }
    </style>
</head>
<body>
    <div class="mainCont">
        <div class="smallCell">1</div>
        <div class="smallCell">2</div>
        <div class="smallCell">3</div>
        <div class="smallCell">4</div>
        <div class="smallCell">5</div>
        <div class="smallCell">6</div>
        <div class="smallCell">7</div>
        <div class="smallCell">8</div>      
    </div>
</body>

非常感谢任何帮助！

3 个答案:

答案 0 :(得分：1)

你可以做这样的事情并改进它：

使用Floats

<强> HTML 

<div class="wrap">
    <div class="group">
        <div class="cell">1</div>
        <div class="cell">2</div>
        <div class="cell">3</div>
        <div class="cell">4</div>
    </div>
    <div class="group">
        <div class="cell">1</div>
        <div class="cell">2</div>
        <div class="cell">3</div>
        <div class="cell">4</div>
    </div>
    <div class="group">
        <div class="cell">1</div>
        <div class="cell">2</div>
        <div class="cell">3</div>
        <div class="cell">4</div>
    </div>
    <div class="group">
        <div class="cell">1</div>
        <div class="cell">2</div>
        <div class="cell">3</div>
        <div class="cell">4</div>
    </div>
</div>

<强> CSS 

.wrap {width: 500px; overflow: hidden;}
.group {width: 48%; float: left;}
.cell {width: 48%; float: left; text-align: center; line-height: 100px; background: #09f; border: 1px solid #ccc;}

没有浮动

<强> CSS 

.wrap {width: 500px; overflow: hidden;}
.group {width: 48%; display: inline-block;}
.cell {width: 48%; display: inline-block; text-align: center; line-height: 100px; background: #09f; border: 1px solid #ccc; margin: 2px 0 0;}

预览

<强>抹灰

<强>内联块

小提琴：http://jsfiddle.net/praveenscience/Gmy89/（浮动）

小提琴：http://jsfiddle.net/praveenscience/Gmy89/1/（内联块）

答案 1 :(得分：1)

一个可能性是保持组内嵌块的第一个单元格，但是具有和超大，并通过相对定位（以及带边距的一些技巧）管理其他单元格。

我完成了尺寸较小的演示，以便更轻松地使用它。

主要优点是您无需管理HTML中的任何内容。

您将使用nth-child，因此您需要针对IE8进行polyfill。 （但无论如何，在你的代码中已经有了nth-childs）

CSS 

.container {
    position: absolute;
    left: 40px;
    top: 40px;
    width: 200px;
    height: 200px;
    border: solid 1px gray;
}

.container div {
    display: inline-block;
    width: 20px;
    height: 20px;
}
.container div:nth-child(4n+1) {
    background-color: yellow;
    margin-right: 20px;
    margin-bottom: 20px;
}

.container div:nth-child(4n+2) {
    position: relative;
    left: -20px;
    margin-right: -20px;
}

.container div:nth-child(4n+3) {
    position: relative;
    left: -46px;
    top: 20px;
    margin-right: -20px;
}

.container div:nth-child(4n) {
    position: relative;
    left: -26px;
    top: 20px;
    margin-right: -20px;
}

demo

答案 2 :(得分：0)

HTML：

<ul class=row>
    <li>
        <ul class=grid>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li>
        <ul class=grid>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
</ul>

CSS：

li {
    float: left;
    margin: 10px;
    list-style-type: none;
    min-width: 80px;
    min-height: 80px;
}

.grid > li:nth-child(3) {
    clear: both;
}

http://jsfiddle.net/MyQqE/1/

相关问题
最新问题