如何将文章发布日期与容器底部对齐

Question

基本上我需要文章发布日期（1/9/2016）在容器内部的底部放置或对齐。现在日期就在文本的正下方，但我需要它放在容器的底部。我的网站是watchathletics.com

＆＃13;

＆＃13;

.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;	
	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;
 
 }

＆＃13;

<div class="headline_container">
            	<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>

＆＃13;

＆＃13;

＆＃13;

nt增加。

Answer 1

您可以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;	
  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">
            	<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>

Answer 2

您可以将班级.top_pub_date更改为：

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

Answer 3

您正在寻找的是

position: absolute;
bottom: 0;

＆＃13;

＆＃13;

.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;	
	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;
  left: 0;
 
 }

＆＃13;

<div class="headline_container">
            	<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>

＆＃13;

＆＃13;

＆＃13;