如何將文章發佈日期對齊到容器底部

基本上我需要該文章的發佈日期（1/9/2016）在容器底部放置或對齊。現在，日期恰好位於文本的正下方，但我需要將它放在容器的底部。我的網站是watchathletics.com如何將文章發佈日期對齊到容器底部

.headline_container { 
 
\t width: 334px; 
 
\t height: 80px; 
 
\t position: relative; 
 
\t margin: 8px 0; 
 
\t -moz-border-radius: 1px; 
 
\t border-radius: 1px; 
 
\t border: 1px solid #e6e6e6; 
 
\t -moz-box-shadow: 0 2px 2px #e6e6e6; 
 
\t -webkit-box-shadow: 0 2px 2px #e6e6e6; 
 
\t box-shadow: 0 2px 2px #e6e6e6; \t 
 
\t background: #fff; 
 
\t 
 
} 
 

 
.headline_photo { 
 
\t width:90px; 
 
\t height:60px; 
 
\t margin-top: 6px; 
 
\t margin-left: 6px; 
 
\t -moz-border-radius: 1px; 
 
\t border-radius: 1px; 
 
\t border: 1px solid #ffffff; 
 
\t -moz-box-shadow: 0 2px 2px #e6e6e6; 
 
\t -webkit-box-shadow: 0 2px 2px #e6e6e6; 
 
\t box-shadow: 0 2px 2px #e6e6e6; 
 
} 
 

 

 
.headline_text { 
 
\t position: relative; 
 
\t left: 111px; 
 
\t top: -63px; 
 
\t width: 220px; 
 
\t height: 60px; 
 
\t font-size: 13px; 
 
\t } 
 

 
.headline_text a { 
 
\t font-size: 14px; 
 
} 
 

 
.top_pub_date { 
 
    font-weight: bold; 
 
    font-size: 11px; 
 
    
 
}

<div class="headline_container"> 
 
      \t <div class="headline_photo"><img src=\"image.jpg"></div> 
 
       <div class="headline_text">&bull; <a style=\"font-size:14px; line-height:105%\" href="#" class="clear_href" title=\"$top_normal_title\"> Some text hereSome text hereSome text hereSome text here </a><br/><div class="top_pub_date"> 1/9/2016 </div></div> 
 
      </div>

NT增大。

來源

2016-11-30 Girts

您可以absolute定位元素。

在這個例子中，我只是將其定位在右下角：

.headline_container { 
 
    width: 334px; 
 
    height: 80px; 
 
    position: relative; 
 
    margin: 8px 0; 
 
    -moz-border-radius: 1px; 
 
    border-radius: 1px; 
 
    border: 1px solid #e6e6e6; 
 
    -moz-box-shadow: 0 2px 2px #e6e6e6; 
 
    -webkit-box-shadow: 0 2px 2px #e6e6e6; 
 
    box-shadow: 0 2px 2px #e6e6e6; \t 
 
    background: #fff; 
 

 
} 
 

 
.headline_photo { 
 
    width:90px; 
 
    height:60px; 
 
    margin-top: 6px; 
 
    margin-left: 6px; 
 
    -moz-border-radius: 1px; 
 
    border-radius: 1px; 
 
    border: 1px solid #ffffff; 
 
    -moz-box-shadow: 0 2px 2px #e6e6e6; 
 
    -webkit-box-shadow: 0 2px 2px #e6e6e6; 
 
    box-shadow: 0 2px 2px #e6e6e6; 
 
} 
 

 

 
.headline_text { 
 
    position: relative; 
 
    left: 111px; 
 
    top: -63px; 
 
    width: 220px; 
 
    height: 60px; 
 
    font-size: 13px; 
 
} 
 

 
.headline_text a { 
 
    font-size: 14px; 
 
} 
 

 
.top_pub_date { 
 
    font-weight: bold; 
 
    font-size: 11px; 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
}

<div class="headline_container"> 
 
      \t <div class="headline_photo"><img src=\"image.jpg"></div> 
 
       <div class="headline_text">&bull; <a style=\"font-size:14px; line-height:105%\" href="#" class="clear_href" title=\"$top_normal_title\"> Some text hereSome text hereSome text hereSome text here </a><br/><div class="top_pub_date"> 1/9/2016 </div></div> 
 
      </div>

來源

2016-11-30 14:36:43 Dekel

感謝德克爾的位置是：絕對解決問題。非常感謝。 – Girts

歡迎您:) – Dekel

您可以在.top_pub_date類更改爲：

.top_pub_date { 
    font-weight: bold; 
    font-size: 11px; 
    position: absolute; 
    right: 0; 
    bottom: 0; 
}

來源

2016-11-30 14:39:10 fsulser

什麼你正在尋找是

position: absolute; 
bottom: 0;

.headline_container { 
 
\t width: 334px; 
 
\t height: 80px; 
 
\t position: relative; 
 
\t margin: 8px 0; 
 
\t -moz-border-radius: 1px; 
 
\t border-radius: 1px; 
 
\t border: 1px solid #e6e6e6; 
 
\t -moz-box-shadow: 0 2px 2px #e6e6e6; 
 
\t -webkit-box-shadow: 0 2px 2px #e6e6e6; 
 
\t box-shadow: 0 2px 2px #e6e6e6; \t 
 
\t background: #fff; 
 
\t 
 
} 
 

 
.headline_photo { 
 
\t width:90px; 
 
\t height:60px; 
 
\t margin-top: 6px; 
 
\t margin-left: 6px; 
 
\t -moz-border-radius: 1px; 
 
\t border-radius: 1px; 
 
\t border: 1px solid #ffffff; 
 
\t -moz-box-shadow: 0 2px 2px #e6e6e6; 
 
\t -webkit-box-shadow: 0 2px 2px #e6e6e6; 
 
\t box-shadow: 0 2px 2px #e6e6e6; 
 
} 
 

 

 
.headline_text { 
 
\t position: relative; 
 
\t left: 111px; 
 
\t top: -63px; 
 
\t width: 220px; 
 
\t height: 60px; 
 
\t font-size: 13px; 
 
\t } 
 

 
.headline_text a { 
 
\t font-size: 14px; 
 
} 
 

 
.top_pub_date { 
 
    font-weight: bold; 
 
    font-size: 11px; 
 

 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    
 
}

<div class="headline_container"> 
 
      \t <div class="headline_photo"><img src=\"image.jpg"></div> 
 
       <div class="headline_text">&bull; <a style=\"font-size:14px; line-height:105%\" href="#" class="clear_href" title=\"$top_normal_title\"> Some text hereSome text hereSome text hereSome text here </a><br/><div class="top_pub_date"> 1/9/2016 </div></div> 
 
      </div>

來源

2016-11-30 14:40:14 Oksid

如何將文章發佈日期對齊到容器底部

回答

相關問題