3

我有一个设计，我需要将标题与另一列中的某些内容对齐。

标题的长度可以是可变的，所以我试图弄清楚如何在所有情况下对齐边框底部。

（下面只是一些演示代码来突出我的问题）

<div class="container">
    <div class="header-container">
        <h1>Short title</h1>
    </div>
    <div class="header-container">
        <h1>This is a much longer title title</h1>
    </div>
</div>​

.header-container 
{
    width: 200px;
    font-size: 1.4em;  
    margin: 10px 20px; 
    float: right; 
    border-bottom: 1px solid #bbb;        
}​

请参见

http://jsfiddle.net/bmxSY/

所以在短标题的情况下，第一行应该是空白的。反正有没有用纯css做这个。我可能会对字符进行计数并添加一个边距顶部，但这不是 100% 万无一失的。

编辑* 这里真正的问题是标题需要与不同的包含 div 中的内容对齐。所以示例 HTML 标记和 CSS 应该更像...

<div class="container">
    <div class="span4">
        <div class="header-container">
            <h1>Short title</h1>
        </div>
    </div>
    <div class="span8">
        <div class="header-container">
            <h1>This is a much longer title title</h1>
        </div>
    </div>
</div>​

.header-container {
    width: 200px;
    font-size: 1.4em;  
    margin: 10px 20px; 
    border-bottom: 1px solid #bbb;
    text-align: left;
}

.span4 
{
    width:60%;
    float: left;
}

.span8
{
    width:40%;
    float: left;
}

​</p>

4

3 回答 3

1

最简单的方法是：http display: inline-block: //jsfiddle.net/thirtydot/bmxSY/7/

.container {
    text-align: right;
}
.header-container {
    width: 200px;
    font-size: 1.4em;  
    margin: 10px 20px; 
    border-bottom: 1px solid #bbb;
    text-align: left;
    display: inline-block;
    vertical-align: bottom;
}​
于 2012-11-28T12:55:27.923 回答
0

其实这是不可能的，但是通过欺骗，我们可以做到。

.outer {
    position:relative;
    display:table;
    height: 200px;
    width: 200px;
    vertical-align: middle; 
    text-align: center;
    border: 1px solid #CCCCCC;
    background:red;
    float:left
}
.inner {
    width:100%;
    display:table-cell;
    vertical-align:bottom;
    position:relative;
}
p{background:blue;border:1px solid #000}

演示：http ://www.pmob.co.uk/temp/vertical-align9.htm

于 2012-11-28T12:52:18.527 回答
0

用于table-cell对齐父级底部的 div。

不幸dispaly:table-cell的是不支持margin选项所以你需要通过边界来操作它。

CSS

.container{display:table-row; float:right}
.header-container
{
    width: 200px;
    font-size: 1.4em;  
    border-right:20px solid white;   border-left:20px solid white;
    border-top:10px solid white;   border-bottom:10px solid white;
    border-bottom: 1px solid #bbb;        
    display:table-cell; vertical-align:bottom
}

演示

于 2012-11-28T12:54:38.180 回答