Different alignments

dabblet.css

/* Different alignments
 */
body
{
    margin: 0;
    padding: 0;

    background: url('../desktop.blocks/grid/grid.png');
}

.items {
	position: relative;
	z-index: 9;
	overflow: hidden;
}

.item
{
    font-size: 0;

    display: inline;

    margin: 0 10px 10px 0;

    background: red;
}

.item:before {
	content: "";
	display: inline-block;
	vertical-align: bottom;
	width: 128px;
	height: 1px;
	background: red;
	margin: 0 0 -1px -128px;
}
.item:after {
	content: "";
	display: inline-block;
	vertical-align: top;
	width: 128px;
	height: 500px;
	margin: 0 0 -500px -128px;
}

.item:hover .text {
	background: lime;
}

@media (min-resolution: .001dpcm) {
    _:-o-prefocus, .item { /* стиль только для Opera 12.00+ */
        font-size: 1px;
    };
}

.image
{
    font-size: 13px;

    display: inline-block;

    width: 118px;
    height: 100px;
    margin: 1px 0 5px;

    vertical-align: text-bottom;

    background: aqua;
}

.text
{
    font-size: 13px;

    display: inline-block;

    width: 118px;
    margin: 0 0 0 -118px;

    vertical-align: text-top;

    background: yellow;
}

dabblet.html

<h2>Different vertical alignment</h2>

<div class="items"
    ><a href="#" class="item"
        ><img class="image" src="http://yandex.st/lego/_/aqjke1FqkrtypCn2kUAdsHbYCSo.png" alt=""
        ><span class="text">text</span
    ></a><a href="#" class="item"
        ><img class="image" style="height: 120px;" src="http://yandex.st/lego/_/aqjke1FqkrtypCn2kUAdsHbYCSo.png" alt=""
        ><span class="text">text text text text text text</span
    ></a><a href="#" class="item"
        ><img class="image" style="height: 180px;" src="http://yandex.st/lego/_/aqjke1FqkrtypCn2kUAdsHbYCSo.png" alt=""
        ><span class="text">text</span
    ></a><a href="#" class="item"
        ><img class="image" src="http://yandex.st/lego/_/aqjke1FqkrtypCn2kUAdsHbYCSo.png" alt=""
        ><span class="text">text text text text text text text text text text text text text text text text text text</span
    ></a><a href="#" class="item"
        ><img class="image" src="http://yandex.st/lego/_/aqjke1FqkrtypCn2kUAdsHbYCSo.png" alt=""
        ><span class="text">text text text text text text text</span
    ></a><a href="#" class="item"
        ><img class="image" style="height: 160px;" src="http://yandex.st/lego/_/aqjke1FqkrtypCn2kUAdsHbYCSo.png" alt=""
        ><span class="text">text</span
    ></a><a href="#" class="item"
        ><img class="image" style="height: 140px;" src="http://yandex.st/lego/_/aqjke1FqkrtypCn2kUAdsHbYCSo.png" alt=""
        ><span class="text">text text text text text text text text text text text</span
    ></a><a href="#" class="item"
        ><img class="image" src="http://yandex.st/lego/_/aqjke1FqkrtypCn2kUAdsHbYCSo.png" alt=""
        ><span class="text">text</span
    ></a><a href="#" class="item"
        ><img class="image" src="http://yandex.st/lego/_/aqjke1FqkrtypCn2kUAdsHbYCSo.png" alt=""
        ><span class="text">text</span
    ></a><a href="#" class="item"
        ><img class="image" src="http://yandex.st/lego/_/aqjke1FqkrtypCn2kUAdsHbYCSo.png" alt=""
        ><span class="text">text</span
    ></a><a href="#" class="item"
        ><img class="image" style="height: 120px;" src="http://yandex.st/lego/_/aqjke1FqkrtypCn2kUAdsHbYCSo.png" alt=""
        ><span class="text">text text text text text text</span
    ></a><a href="#" class="item"
        ><img class="image" style="height: 180px;" src="http://yandex.st/lego/_/aqjke1FqkrtypCn2kUAdsHbYCSo.png" alt=""
        ><span class="text">text</span
    ></a><a href="#" class="item"
        ><img class="image" src="http://yandex.st/lego/_/aqjke1FqkrtypCn2kUAdsHbYCSo.png" alt=""
        ><span class="text">text text text text text text text text text text text text text text text text text text</span
    ></a><a href="#" class="item"
        ><img class="image" src="http://yandex.st/lego/_/aqjke1FqkrtypCn2kUAdsHbYCSo.png" alt=""
        ><span class="text">text text text text text text text</span
    ></a><a href="#" class="item"
        ><img class="image" style="height: 160px;" src="http://yandex.st/lego/_/aqjke1FqkrtypCn2kUAdsHbYCSo.png" alt=""
        ><span class="text">text</span
    ></a><a href="#" class="item"
        ><img class="image" style="height: 140px;" src="http://yandex.st/lego/_/aqjke1FqkrtypCn2kUAdsHbYCSo.png" alt=""
        ><span class="text">text text text text text text text text text text text</span
    ></a><a href="#" class="item"
        ><img class="image" src="http://yandex.st/lego/_/aqjke1FqkrtypCn2kUAdsHbYCSo.png" alt=""
        ><span class="text">text</span
    ></a><a href="#" class="item"
        ><img class="image" src="http://yandex.st/lego/_/aqjke1FqkrtypCn2kUAdsHbYCSo.png" alt=""
        ><span class="text">text</span
    ></a>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}