1

複数のアイテムを含むページを作成したいのですが、それぞれに大きな数字があり、横にいくつかのテキストがあります (この下部の「ビッグバンクブーム」のように)

私は2つの解決策を見つけました。

  • 項目ごとに CSS レイアウトで 2 つの列を使用する

このソリューションの問題点は、HTML に多数の div (ラッパーごとに 1 つと 2 つの列.

  • この大きな数字で画像を作成し、サイド テキストを含む div の背景にします。

HTML の方がはるかに簡単ですが、その場合、数値を変更する必要がある場合は、常に新しい画像を作成する必要があります。

誰もがより良い（ソースコードの観点から最小限の）ソリューションを推奨できますか?

4

2 に答える 2

1

HTML5 の新しいデータ属性と、content. マークアップは非常に最小限で、変更は非常に簡単です。

HTML:

<p data-text="50%">According to some statistician, 50% of all humans...</p>

CSS:

p {
    width: 20em;
    padding-left: 7em;
    position: relative;
}
p::before {
    content: attr(data-text);
    position: absolute;
    top: .25em;
    left: 0;
    font-size: 3em;
}

デモ

于 2013-02-03T20:10:41.060 に答える
1

このような場合に画像を使用することは、開発者の観点からだけでなく、ドキュメントに誤ったセマンティックな意味を与えるため、悪い解決策です。数字は、画像としてではなく、数字として、またはできるだけ近い数字としてマークアップする必要があります。

ここでできることは、たとえば div タグを作成することです-または、含まれるものに意味的に近いものを作成し、内部に2つの要素、スパンとしての数値、または実際には、この時点で何でも構いません、アイデアが得られ、テキストが段落として表示されます。

<div>
   <span>45%</span>
   <p>Lorem ipsum dolor amet.</p>
</div>

インフォグラフィックで示したように簡単に見えるようにするために、コードを示して後で説明します。

div {
   width: 500px;
}

span {
   display: block;
   float: left;
   width: 40%;
}

これが基本的な考え方です。番号と段落が隣り合うように、番号を内側にしてスパン要素を左にフロートさせます。必要に応じてスパンのフォントサイズを大きくし、色やフォントファミリーをいじって見栄えを良くします。

これらの div 要素が相互に表示される場合は、それらが適切にクリアされていることを確認する必要があります。

div:after {
   clear: both;
   content: '';
   height: 0;
}

これにより、浮動要素が div から出てこないことも保証され、境界線が適用された場合に奇妙に見えます。

于 2013-02-03T20:12:24.720 に答える