0

異なる div クラス間で異なるサイズ タイプを揃える正しい方法を理解したいと思います。現在、コードは、小さい型を大きい型の上に揃えるよう強制しています。最もクリーンなコードを使用して、同じタイポグラフィ ベースラインのすべての div でタイプを揃えるにはどうすればよいですか。これは本当に簡単なことのように思えますが、答えが見つかりません。

また、これが意味的に正しいことを願っています（レスポンシブで、さまざまなデバイスでサイズ変更および再配置（フローティング）できるデータの行を作成しようとしています）。すべての提案を歓迎します。

デモへのリンク

4

4 に答える 4

0

CSSのline-heightプロパティが必要なようです。そうすれば、テキストの行を同じ高さにすることができますが、font-size別々に影響を与えることができます

#artist { /* Selector to affect all the elements you want */
    color: #000;
    font-size: 18px; /* Default font size */
    line-height:18px; /* Line height of largest font-size you have so none go */
                      /* above the top of their container                     */
}

デモ

于 2013-08-24T21:56:38.637 に答える
0

ベースライン グリッドに一致するように、各フォント サイズの行の高さと場合によっては垂直余白を調整する必要があります。

これを読むことをお勧めします：http://coding.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/

于 2013-08-24T21:56:57.887 に答える
0

テキストが配置される場所の調整は、パディングとマージンで行われます。ただし、この設定では、各 div にクラスを追加することで、div 内のどこにテキストを配置するかを制御できます。もちろん、フォントの em サイズが複数あるため、パディングはベースライン シフトによって異なります。フィドル http://jsfiddle.net/rnEjs/

 #artist {

     padding: 5px;

     float: left;

     width: 100%;

     background-color: #036;

     color: #000;

     font-size: 18px;

     overflow: hidden;

 }

 .genre {

     width: 5em;

     float:left;

     height: 50px;

     background-color: #09F;

 }

 .genre p {

     padding:5px 5px;

 }

 .artistName {

     float: left;

     width: 175px;

     height: 50px;

     background-color: #F39;

 }

 .artistName p {

      padding:5px 5px;

 }

 .birth {

     float: left;

     width: 5em;

     height: 50px;

     font-size: 12px;

     background-color: #F90;

 }

 .birth p {

     padding:15px 5px;

 }

 .medium {

     float: left;

     width: 10em;

     height: 50px;

     font-size: 12px;

     background-color: #099;

 }

 .medium p {

      padding:15px 5px;

 }

 .gallery {

     float: left;

     width: 10em;

     height: 50px;

     font-size: 12px;

     background-color: #FF6;

 }

 .gallery p {

    padding:15px 5px;

 }

 .website {

     float: left;

     width: 10em;

     height: 50px;

     font-size: 12px;

     background-color: #99F;

 }

 .website p {

      padding:15px 5px;

 }


<div id="artist">
    <div class="genre">
        <p>Genre</p>
    </div>
    <div class="artistName">
        <p>Artist First Last</p>
    </div>
    <div class="birth">
        <p>birth year</p>
    </div>
    <div class="medium">
        <p>medium</p>
    </div>
    <div class="gallery">
        <p>gallery name</p>
    </div>
    <div class="website">
        <p>website</p>
    </div>
</div>
于 2013-08-24T22:11:03.293 に答える