格垂直对齐到下

我有一个小问题，的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框verticaly对准底部（到主题4）。在这里，我发现了一个类似的问题CSS Vertical Alignment of Div 但我希望它没有精确地使用px，因为它会响应（使用媒体查询），而且不使用JavaScript。

来源

2013-09-25 Daniel

Here's your fiddle updated

所有您需要做的是改变媒体查询内部.column风格，这一点：

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

你的做法几乎是完美的）所有你需要做的是display: inline-block取代display: table-cell并删除float: left。

您可能还想重写大部分CSS，因为您不再需要#galeria容器中的display: table这样的容器。

作为一个松散此外，你不需要

position: relative;

，除非它成为你用于其他目的。

来源

2013-09-25 19:37:36 matewka

格垂直对齐到下

回答

相关问题