如何在HTML5中创建可调整大小的网格布局

时间：2015-01-20 16:16:09

标签： html css

我想创建一个6 x的网格。柱保持均匀和尺寸与外容器的宽度（即主体本身）。每行内的高度应该是均匀的，并且随着细胞的含量而变化。

这是我到目前为止所做的：

body {
    text-align: center;
}

.item {
    padding: 20px;
    margin-bottom: 10px;
    text-align: left;
    display: block;
    font-size: 0.75em;
}

.row {
    margin: 10px;
    display: block;
    margin-bottom: 25px;
    box-sizing: border-box;
    border: solid blue 1px;
    height: 100px;
}

.row div {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    float: left;
    height: 100%;
    width: 16.667%
}

.row a {
    text-align: center;
    margin: 5px;
    padding: 20px;
}

.row a * {
    display: block;
}

.row img {
    width: 100%;
    display: inline-block;
}
<div class="row">
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Applied Panel - Base Left Side</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Applied Panel - Base Right Side</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 3 Drawer Stack w-Applied Door</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 3 Drawer Stack</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 4 Drawer Stack w-Applied Door</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 4 Drawer Stack</span>
        </a>
    </div>
</div>
<div class="row">
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Applied Panel - Base Left Side</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Applied Panel - Base Right Side</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 3 Drawer Stack w-Applied Door</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 3 Drawer Stack</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 4 Drawer Stack w-Applied Door</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 4 Drawer Stack</span>
        </a>
    </div>
</div>
<div class="row">
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Applied Panel - Base Left Side</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Applied Panel - Base Right Side</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 3 Drawer Stack w-Applied Door</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 3 Drawer Stack</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 4 Drawer Stack w-Applied Door</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 4 Drawer Stack</span>
        </a>
    </div>
</div>

http://jsfiddle.net/aj8py9gu/4/

这些要求源于在WPF中创建的类似界面。我能用三行XAML完成所有这些操作。我在使用HTML5时遇到了很多麻烦。行div（蓝色）设置为固定高度，否则它们会缩小到零高度，并且所有单元格都会相互浮动。我不希望这里有固定的尺寸。

我知道很多HTML / CSS / JavaScript，但我真的需要另外一些关注。我究竟做错了什么。我可以在javascript中处理大小事件，但我更愿意尽可能使用CSS。

2 个答案:

答案 0 :(得分：1)

这是由浮动元素的所有子元素引起的。最简单的解决方法是在overflow:hidden;上设置.row并摆脱设定的高度。

这称为“清除浮动”。可以在此处找到更多方法：What methods of ‘clearfix’ can I use? 

body {
    text-align: center;
}

.item {
    padding: 20px;
    margin-bottom: 10px;
    text-align: left;
    display: block;
    font-size: 0.75em;
}

.row {
    margin: 10px;
    display: block;
    margin-bottom: 25px;
    border: solid blue 1px;
    overflow:hidden;
}

.row div {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    float: left;
    height: 100%;
    width: 16.667%
}

.row a {
    text-align: center;
    margin: 5px;
    padding: 20px;
}

.row a * {
    display: block;
}

.row img {
    width: 100%;
    display: inline-block;
}
<div class="row">
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Applied Panel - Base Left Side</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Applied Panel - Base Right Side</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 3 Drawer Stack w-Applied Door</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 3 Drawer Stack</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 4 Drawer Stack w-Applied Door</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 4 Drawer Stack</span>
        </a>
    </div>
</div>
<div class="row">
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Applied Panel - Base Left Side</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Applied Panel - Base Right Side</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 3 Drawer Stack w-Applied Door</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 3 Drawer Stack</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 4 Drawer Stack w-Applied Door</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 4 Drawer Stack</span>
        </a>
    </div>
</div>
<div class="row">
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Applied Panel - Base Left Side</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Applied Panel - Base Right Side</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 3 Drawer Stack w-Applied Door</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 3 Drawer Stack</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 4 Drawer Stack w-Applied Door</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 4 Drawer Stack</span>
        </a>
    </div>
</div>

答案 1 :(得分：0)

你可以像这样使用display：flex：

.row {
    margin: 10px;
    display: flex;
    margin-bottom: 25px;
    border: solid blue 1px;
    height: auto;
}

.row > div {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    flex: 0 0 16.667%;
    height: auto;
}

检查更新后的小提琴：http://jsfiddle.net/29skzne6/1/

相关问题
最新问题