我有一个小问题，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 对齐)。这里我发现了类似的问题CSS Vertical Alignment of Div 但我希望它在没有 px 精确的情况下使用，因为它将具有响应性(通过媒体查询)并且也不需要 JavaScript。
最佳答案
<强> Here's your fiddle updated
您所要做的就是将媒体查询中的 .column 样式更改为:
.column {
width:47%;
position:relative;
vertical-align:bottom;
display:inline-block;
}
您的方法几乎是完美的；)您所要做的就是将 display: table-cell 替换为 display: inline-block 并删除 float: left .
您可能还想重写大部分 CSS，因为您不再需要 #galeria 容器中的 display: table 之类的内容.
作为松散的添加，您不需要
position: relative;
除非它为您服务于其他目的。
关于html - div 垂直对齐到底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19013647/