我一直在研究这个问题几个小时:我似乎无法将“tag”div垂直对齐到它所在的div的底部。它所处的div水平扩展以填充它所在的div ,它的大小会发生水平变化,因为它旁边是带图像的div。我希望得到这个“标签”div只是坚持它的容器的底部,但我似乎无法搞清楚。如果有必要,我也愿意重组我的div。
我已尝试设置bottom: 0; overflow: hidden;
我已尝试设置它的容器div position: relative;
及其“position: absolute;
以下是jsfiddle的链接:http://jsfiddle.net/29WKX/8/
这就是我现在所处的位置:
CSS:
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
padding-top: 100px;
background-color: deepskyblue;
}
.content{
background: #fff;
margin: 0 auto;
width:720px;
text-align: center;
padding: 1px;
/* border-radius */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
/* box-shadow */
-webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
-moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
}
.right-pic {
float: right;
width: auto;
}
.left-pic{
float: left;
width: auto;
}
.text {
background-color: lightgray;
overflow: hidden;
position: relative;
}
.tag{
background-color: red;
position: relative;
bottom: 0;
}
这是我的HTML:
<div class="content">
<div class="right-pic">
<img src="" width="300px" height="220px" alt="image">
</div>
<div class="text">
<h2>Title</h2>
<p>this takes up remaining space to the left</p>
</div>
<div class="tag">tag</div>
<div style="clear: both"></div>
</div>
<br />
<div class="content">
<div class="left-pic">
<img src="" width="320px" height="200px" alt="image">
</div>
<div class="text">
<h2>Title</h2>
<p>this takes up remaining space to the left</p>
</div>
<div style="clear: both"></div>
</div>
答案 0 :(得分:1)
如果我理解你的问题,你需要做的就是添加:
position: relative;
在您的内容元素中。并且a:
position: absolute;
in yout tag element。