私の場合、このようにすると思います。
HTML
1<div id="rank">
2 <ol>
3 <li>
4 <div>
5 <a href="#">
6 <dl>
7 <dt><span>順位画像</span></dt>
8 <dd>
9 <p>地名部分</p>
10 <h3>タイトル部分(h3は適当につけてます)</h3>
11 </dd>
12 </dl>
13 </a>
14 </div>
15 </li>
16 <li>以下最低位まで続く</li>
17 </ol>
18</div>
CSS
1#rank {}
2#rank ol {
3 margin:左右にマージンを設ける場合必須;
4 list-style-type:none;
5}
6#rank ol li {
7 padding-bottom:各項目間のマージンpx;
8}
9#rank ol li div {
10 background:斜線背景を「/」の形でスライスして left top repeat;
11}
12#rank ol li div a {
13 display:block;
14}
15#rank ol li div a dl {
16 display:table;
17 width:100%;
18}
19#rank ol li div a dl dt,#rank ol li div a dl dd {
20 display:table-cell;
21 padding:画像の上下同じだけのマージンとして仮定px 0;
22 vertical-align:middle;
23}
24#rank ol li div a dl dt {
25 width:PC表示の順位画像+その左右マージンpx;
26 text-align:center;
27}
28#rank ol li div a dl dt span {
29 display:inline-block;
30 margin:0 auto;
31 width:PC表示の順位画像サイズpx;
32}
33#rank ol li div a dl dt span img {
34 width:100%;
35 height:auto;
36}
37#rank ol li div a dl dd {
38 text-align:left;
39}
40#rank ol li div a dl dd p {フォントサイズなど}
41#rank ol li div a dl dd h3 {フォントサイズ、背景色など(右にマージンを与える場合、
42width:80%;などを指定)}
こんな感じです。
説明1 #rank ol liで空白部分をきっちり別けるようにしてあります(サンプルは変なところまでクリッカブルに)。
説明2 #rank ol li divで背景指定ですが、1枚画像ではなくリピートの方が、美しいはず(笑)。
で、このままだと、画像を縮小しないところまでは良いのですが、レスポンシブだということで、
画像を縮小する解像度以下では、#rank ol li div a dl dtと#rank ol li div a dl dt span の
widthは、パーセンテージで指定すると、良いのではないかと思います。
上記のやり方だと、レスポンシブでパーセンテージ指定するまでは、順位画像領域のdtはサイズ固定で、
徐々に、テキスト領域のddが縮んでいきます。で、パーセンテージで指定されるブレークポイントからは、
どちらの領域も同じ割合で縮んでいく。という感じになります。
639pxで縮小開始の場合、計算式は以下になります。
PCで指定した#rank ol li div a dl dtのwidth / 640 * 100 = レスポンシブ#rank ol li div a dl dt
順位画像のwidth / PCで指定した#rank ol li div a dl dtのwidth * 100 = レスポンシブ#rank ol li div a dl dt span
全て脳内だけで、検証はしておりません(笑)、あしからず。
すみません。追記です。
投稿した後、風呂場で気付きました(笑)。
先の計算式で、640としたところは、これだと、左右に全くマージンが無い状態になるので、
例えば、#rankがwidth="100%"でol左右に20pxづつマージンを入れる場合、640ではなく600となります。
でも、スマホサイズで左右に20pxもあると、狭いかと思うので、#rank ol もレスポンシブ記述では、
margin:0 auto;とwidth:90%;などを追記とするのが正解かもしれませんね。