我想为我的 div 设置一个特定的布局。这些 div 包含摘要(文本约 500 个字符长),我希望在文本之后,在我的框的底部边缘,有一行包含类似 附加信息的链接:*link*
.
这是一个 ascii layout-art 供你们理解我的意思:
Here is some text blablablablablablablab lablablablablablablablablablablabla gfff ff f blablablablablablablablablablablablabla blablablablablablablablablablablablabla ff f ffff blablablablablablablablablablab lablablablablablablablablablablablablablablablablab ff lablablablablablablablablablablablablab lablablablablablablablablabla blablablablablabla blablablablablabla blablablablablablablabla blablablablablablablabla blablablablablablablabla
Link to additional information here : *link*.
我希望最后一行居中。我的布局使用百分比,因此我不能使用绝对定位。如果调整窗口大小,它应该能够移动。
这是 div 的 CSS:
float: left;
width: 91.5%;
min-width: 825px;
height: 120px;
text-align: left;
z-index: 1;
border:solid 1px #19365D;
background-image:url('images/NiceBackgroundDude.png');
background-repeat:repeat-x;
margin-left:3.7%;
margin-right:3.7%;
padding-left:0.5%;
padding-right:0.5%;
编辑: 如果忘了说明,那些 Div 是 DOM 元素(也就是每次加载页面时生成它们)并且链接位于 XML 文件中的单独标记中。因此,如果有什么我可以做的,比如:
<div class="summarydiv"> summary from xml</div><br>
<div class="centerlink">link line and link from xml</div>
最佳答案
我真的很喜欢 div,因为你永远不知道什么时候你可能想要不同的样式 block ,所以我会这样做:
<div class="parent">
<div>Here is some text........</div>
<div class="link"><a href="#">Link to additional information</a></div>
</div>
还有 CSS:
.parent {
position:relative;
float: left;
width: 91.5%;
min-width: 825px;
height: 120px;
text-align: left;
z-index: 1;
border:solid 1px #19365D;
background-image:url('images/NiceBackgroundDude.png');
background-repeat:repeat-x;
margin-left:3.7%;
margin-right:3.7%;
padding-left:0.5%;
padding-right:0.5%;
}
.link {
position:absolute;
width:100%;
bottom:0;
text-align:center;
}
最后是 jsfiddle在行动中展示它!
关于HTML & CSS : Align text line to bottom center of div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24207648/