javascript - cssまたはjqueryを使用してアイコンの横にテキストを配置します

Question

私の機能 HTML はコード生成されたものです。アイコンの横にテキストを表示したいのですが、それを行うことができた唯一の方法は byposition:absolute;であり、一部の製品には機能の真上にカート ボックスがあり、一部の製品にはカート ボックスがないため、これは良くありません。したがって、絶対位置は動作しません。

cssまたはjqueryを使用して、機能名をアイコンの横に相対的に配置する方法はありますか?

私はこれを試しました：http://jsfiddle.net/nHHkQ/

HTML:

<div id="FeatureIconsWrapper">
    <div class="FeatureIconImages">
      <a title="CapacityChildren" href=
      "popup.aspx?title=CapacityChildren&amp;topic=feature_CapacityChildren" rel="icons"
      class="iconClick"><img title="CapacityChildren" alt="CapacityChildren" src=
      "http://i50.tinypic.com/hwh0ud.png" /></a>
    </div>

    <div class="FeatureIconImages">
      <a title="EasyBackpackingSystem" href=
      "popup.aspx?title=EasyBackpackingSystem&amp;topic=feature_EasyBackpackingSystem"
      rel="icons" class="iconClick"><img title="EasyBackpackingSystem" alt=
      "EasyBackpackingSystem" src="http://i50.tinypic.com/hwh0ud.png" /></a>
    </div>

    <div class="FeatureIconImages">
      <a title="EasyInflationSystem" href=
      "popup.aspx?title=EasyInflationSystem&amp;topic=feature_EasyInflationSystem" rel=
      "icons" class="iconClick"><img title="EasyInflationSystem" alt=
      "EasyInflationSystem" src="http://i50.tinypic.com/hwh0ud.png" /></a>
    </div>

    <div class="FeatureIconImages">
      <a title="MaxLoadCapacity" href=
      "popup.aspx?title=MaxLoadCapacity&amp;topic=feature_MaxLoadCapacity" rel="icons"
      class="iconClick"><img title="MaxLoadCapacity" alt="MaxLoadCapacity" src=
      "http://i50.tinypic.com/hwh0ud.png" /></a>
    </div>

    <div class="FeatureIconImages">
      <a title="Weight" href="popup.aspx?title=Weight&amp;topic=feature_Weight" rel=
      "icons" class="iconClick"><img title="Weight" alt="Weight" src=
      "http://i50.tinypic.com/hwh0ud.png" /></a>
    </div>

    <ul id="FeatureIconNamesWrapper">
      <li class="FeatureIconNames">ISO 6185-1</li>

      <li class="FeatureIconNames">ISO 6185-1</li>

      <li class="FeatureIconNames">ISO 6185-1</li>

      <li class="FeatureIconNames">ISO 6185-1</li>

      <li class="FeatureIconNames">ISO 6185-1</li>
    </ul>

    <div class="c1"></div>
  </div>

CSS:

div#FeatureIconsWrapper {
    background-color: #DEDEDE;
    border-left: 1px solid white;
    border-radius: 0 0 7px 7px;
    padding-bottom: 10px;
    width: 236px;
}

div.FeatureIconImages, div#FeatureIconNames {
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
    padding-left: 7px;
    padding-top: 17px !important;
}

div.FeatureIconImages {
    padding-left: 7px;
    padding-top: 20px;
}

div.FeatureIconImages {
    width: 60px;
}


ul#FeatureIconNamesWrapper {
    font-size: 14px;
    font-weight: bold;
    padding-right: 40px;
    position: absolute;
    top: 375px;
}


li.FeatureIconNames {
    margin-bottom: 57px;
    margin-left: 85px !important;
}

Answer 1

問題はhtmlの構造が間違っていることだと思います。私のフィドルのようにhtmlを微調整できる場合は、cssfloatを使用してimg-labelペアを簡単に取得できます。このフィドルを確認してください-http://jsfiddle.net/ashwyn/cgj5U/

また

HTML構造を変更せずにこれを行うこともできます。float:left両方のメインセクションで 使用http://jsfiddle.net/ashwyn/9dUDX/

Answer 2

$imgs = $('#FeatureIconsWrapper .FeatureIconImages'); // cache image wrappers for better performance
$('#FeatureIconNamesWrapper li').each(function(i,e){
    $imgs.filter(':eq(' + i + ')').after($(e).detach());
})​

ここで概念実証のフィドル – CSS は無視してください。.

注: この解決策は、複数の理由で最悪です。マークアップを変更できる方法があれば、それを実行してください。

Answer 3

私はフィドルを編集しました。ここを見てください：フィドル