使用css或jquery在图标旁边放置文本

Question

My features HTML is code generated, I would like to display the text along side the icons but the only way I have managed to do it, is by position:absolute; and this is NOT good as some products have a cart box directly above the features and some dont, therefore absolute position doesnt work.

Is there a way to relatively position the feature names along side the icons using either css or jquery?

I have tried this: 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

I guess the problem is your wrong structure of html. If you can tweak your html as in my fiddle then you can easily obtain img - label pair using css float. Please check this fiddle - http://jsfiddle.net/ashwyn/cgj5U/

OR

You can even do this without changing your html structure. used float:left on both the main sections 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());
})​

Proof of concept fiddle here – disregard the CSS. .

Note: This solution sucks for multiple reasons. If there is any way you can alter the markup: Do it!

Answer 3

i have edited the Fiddle. take a look at here : Fiddle