-1

私の同僚のデザイナーは、Photoshop でテキストを適切に揃えています。テキストの周りに常にスペースがある場合、彼のデザインをコードに適用するにはどうすればよいですか? つまり、負のマージン、行の高さ (例を参照) などをいじることができます。しかし、それでは解決にはなりません。この質問はおそらくすでに発生しています

例: http://jsfiddle.net/bfpPS/

html:

<section>
     <h1 class="wrong">WRONG</h1>
    <img src="http://creativemedias.files.wordpress.com/2010/02/a_beautiful_day___wp_pack_by_little_stock.jpg" />
     <h1 class="right">Isn't it beautiful!</h1>
</section>

CSS:

section, img, h1 {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    line-height: 1.4285714285714em;
    vertical-align: baseline;
    background: transparent;
    font-family:'Lato', Arial, Arial, Helvetica, sans-serif;
    font-weight: normal;
    letter-spacing: 0;
}
img {
    height: auto;
    max-width: 100%;
    width: 50%;
    float: left;
}
h1 {
    font-size: 2em;
}
.wrong {
    float: left;
}
.right {
    line-height: 0.7em;
}
4

1 に答える 1

0

これをコーディングする正しい方法は「間違っている」ことです。ここでは、CSS ではなく、デザイナーが間違っています。通常、このような状況に遭遇した場合、正確な設計を無視して、正しい方法であるとわかっている方法で行います。その後、誰かが不平を言う場合は、それが Web のしくみだと伝えます。負のマージンを設定したり、別のハッキングを行ったりしても、別のフォントを使用したり、より大きなフォント サイズを設定したりしているブラウザでは、正しく表示されません。正しくやってください。

于 2013-09-27T14:25:02.063 に答える