div垂直对齐到底部

Question

我有一个小问题，jsfiddle： http : //jsfiddle.net/s38Ar/

HTML：

    <body>
    <div id="header"></div>
    <div id="galeria">
        <div id="gutter"></div>
        <div class="column2" id="m_col">
            <div class="column" id="col1"><div class="work" id="work1">
                <h1 class="komorka"> theme1 more more more more more more more more more more more theme</h1><img id="paint" class="komorka" src="projekty/asd.png"></img><p class="komorka">1But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.</p>
            </div></div>
            <div class="column" id="col2"><div class="work" id="work2">
                <h1 class="komorka">theme 2</h1><img class="komorka" id="paint" src="projekty/asd.png"></img><p class="komorka">1But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.</p>
            </div></div>
            <div class="column cl2" id="col3"><div class="work" id="work3">
                <h1 class="komorka">theme 3</h1><img class="komorka" id="paint" src="projekty/asd.png"></img><p class="komorka">1But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.</p>
            </div></div>
            <div class="column" id="col4"><div class="work" id="work4">
                <h1 class="komorka">theme 4</h1><img class="komorka" id="paint" src="projekty/asd.png"></img><p class="komorka">1But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.</p>
            </div></div>
            <div class="column" id="col5"><div class="work" id="work5">
                <h1 class="komorka">theme 5</h1><img class="komorka" id="paint" src="projekty/asd.png"></img><p class="komorka">1But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.</p>
            </div></div>
        </div>
    </div>
    <div id="footer"></div>
</body> 

CSS：

    body{background-color:#0d5697;}
.selborder{border:#d7e51c;}
p{font-size:1em;color:white;}
#header{height: 50px;background-color: #666;margin-bottom: 10px;}

h1{font-size:1.5em;color:#dae645;}


@media screen and (max-width: 800px) and (min-width: 448px) {
    #galeria{width:100%;display: table;height: 100%;margin:0 auto;}
    #gutter{background-color:white;display:inline-block;width:3%;height:100%;margin-bottom:10px;float:left;display: inline-block;}
    .column2{height:100%;width:94%;float:left;}
    .column{width:47%;position:relative;vertical-align:bottom;display:table-cell;float:left;}
    .work{vertical-align:bottom;}
    .komorka{width:90%;height:90%;}
    .cl2{clear:both;}
}

我想使theme2框垂直对齐底部（到theme4）。 在这里，我发现了一个类似的Div的CSS垂直对齐问题，但我希望它在不使用px precision的情况下使用，因为它将响应（带有媒体查询）并且也没有JavaScript。

Answer 1

这是你的小提琴更新

您要做的就是将媒体查询中的.column样式更改为：

.column {
    width:47%;
    position:relative;
    vertical-align:bottom;
    display:inline-block;
}

您的方法几乎是完美的；）您所要做的就是替换display: table-cell with display: inline-block并删除float: left 。

您可能还想重写大部分CSS因为您不再需要诸如#galeria容器中的display: table类的东西。

作为一个宽松的补充，您不需要

position: relative;

除非它用于其他目的。

Answer 2

将“ align-items-end”添加到div行。