大きなテキストの上に小さいテキストを並べる方法

私は3つのテキスト項目を1つの容器に入れています。中央のテキストのフォントが大きくなります。最初の項目を2番目の項目の先頭に揃えたい。大きなテキストの上に小さいテキストを並べる方法

.container { 
 
    border: 1px solid black; 
 
} 
 

 
.container p { 
 
    display: inline-block; 
 
} 
 

 
.large { 
 
    font-size: 50px; 
 
}

<body> 
 
    <div class="container"> 
 
    <p class="first">One</p> 
 
    <p class="large">Two</p> 
 
    <p>Three</p> 
 
    </div> 
 
</body>

https://jsfiddle.net/7ofrravh/2/

これを行うには、私は考えることができる唯一の方法は、絶対位置を使用することですが、私は、画面のサイズを変更すると、これはラインの外になります。私は、画面のサイズを変更し、すべての場所に滞在することができるようにしたい。誰もこれを行う方法を知っていますか？

出典

2017-11-15 orangepeel

変更CSS：

.container { 
    border: 1px solid black; 
} 

.container p { 
    display: inline-block; 
    vertical-align:top; 
    margin:0; 
} 

.large { 
    font-size: 50px; 
    line-height:1; 
}

.container { 
 
    border: 1px solid black; 
 
} 
 

 
.container p { 
 
    display: inline-block; 
 
    vertical-align:top; 
 
    margin:0; 
 
} 
 

 
.large { 
 
    font-size: 50px; 
 
    line-height:1; 
 
}

<body> 
 
    <div class="container"> 
 
    <p class="first">One</p> 
 
    <p class="large">Two</p> 
 
    <p>Three</p> 
 
    </div> 
 
</body>

出典

2017-11-15 05:11:26

私はそれを行うだろう方法は次のとおりです。https://jsfiddle.net/7ofrravh/5/。 コンテナを内容の整合性を持って柔軟にすることによって、始めにalign-items: flex-startを使用します。その後、最初の段落位置をmargin: 10px 0 0 0に固定します。ここで

出典

2017-11-15 05:16:47

は、あなたがより多くの本のように見えるようにコードを変更する必要がありますあなたのコードの編集されたバージョン

.container { 
 
    border: 1px solid black; 
 
} 
 

 
.container p { 
 
    display: inline-block; 
 
    margin:0; 
 
} 
 
.container p.first { 
 
    vertical-align:top; 
 
    line-height:40px; 
 
} 
 

 
.large { 
 
    font-size: 50px; 
 
}

<body> 
 
    <div class="container"> 
 
    <p class="first">One</p> 
 
    <p class="large">Two</p> 
 
    <p>Three</p> 
 
    </div> 
 
</body>

出典

2017-11-15 05:18:40

です：

.container { 
 
    border: 1px solid black; 
 
} 
 

 
.container p { 
 
    display: inline-block; 
 
    margin:0; 
 
} 
 

 
.large { 
 
    font-size: 50px; 
 
    line-height:1; 
 
} 
 
    
 
.first { 
 
    vertical-align:top; 
 
}

<body> 
 
    <div class="container"> 
 
    <p class="first">One</p> 
 
    <p class="large">Two</p> 
 
    <p>Three</p> 
 
    </div> 
 
</body>

出典

2017-11-15 05:19:58 Luke

大きなテキストの上に小さいテキストを並べる方法

答えて

関連する問題