Question

我的功能HTML是代码生成的，我想在图标旁边显示文字但是我设法做到的唯一方法是position:absolute;，这不是很好，因为有些产品有购物车盒子正上方的特征和一些不，因此绝对位置不起作用。

有没有办法使用css或jquery在图标旁边相对定位功能名称？

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;
}

problem

This is how it should look

Answer 1

我猜问题是你错误的html结构。如果您可以在我的小提琴中调整html，那么您可以使用css float轻松获得img - label对。请检查这个小提琴 - http://jsfiddle.net/ashwyn/cgj5U/

OR

您甚至可以在不更改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());
})

Proof of concept fiddle here – disregard the CSS.

注意：此解决方案有多种原因。如果有任何方法可以改变标记：做它！

Answer 3

我编辑了小提琴。请看这里：Fiddle

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

3 个答案: