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

table-celldivを親の下部に揃えるために使用します。

残念ながら、オプション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 に答える
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 に答える