Question

我有手风琴，里面的手风琴（jqueryui）有一张桌子，有一些价值。将插入这些值，并根据这些值，我将为其指定一个彩色框。例如，低于30％的红色和高于80％的绿色。我想在课堂上分配图像。所以在Javascript中我可以动态插入一个类，例如redBox和div获取该图像。

由于某些原因，我无法弄清楚...图像相互重叠...例如，最后一个div分配了一个红色，第一个分配了绿色。显示红色。

这是HTML：

<div style="height:20px;overflow:visible" id="networkingIndexCollapsible" class="accordionmodsindexing">
         <h3 style="text-align: right"> <span id="scenarioIndex">Some data</span></h3>
            <div>                           

                 <table class="indexingOptions" >
                     <tr>
                                <td>Networking Index:</td>
                                <td><div id="netIndex">Some data<div id="netIndexSquare" class="greenSquare"></div></div></td>
                              </tr>
                              <tr>
                                <td>- Supplier Index:</td>
                                <td><div id="suppIndex">Some data<div id="supIndexSquare" class="greenSquare"></div></div></td>
                              </tr>
                              <tr>
                                <td>- Deliver Index:</td>
                                <td><div id="delIndex">Some data<div id="delIndexSquare" class="redSquare"></div></div></td>
                              </tr>
                              <tr>
                                <td>- Product Index:</td>
                                <td><div id="proIndex">Some data<div id="proIndexSquare" class="redSquare"></div></div></td>
                              </tr>
                        </table>
            </div>
       </div>
 <div> I am just an empty div</div>

这是CSS：

.redSquare
{
display: inline!important;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(../img/redsquare.png) no-repeat;  
height: 20px;  
padding-left: 55px;
float: right;   
top: 10px;
left: 209px;
position: absolute;
}
.greenSquare
{
display: inline!important;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(../img/greensquare.png) no-repeat;  
height: 20px; 
padding-left: 55px;
float: right;   
top: 10px;
left: 209px;
position: absolute;
 }
.orangeSquare
  {
display: inline!important;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(../img/orangesquare.png) no-repeat;  
height: 20px; 
padding-left: 55px;
float: right;   
top: 10px;
left: 209px;
 position: absolute;
 }

图片尺寸为8x8px。

附图片显示了我面临的问题。表格中设置了绿色，绿色，红色和读取，但仅显示红色。我不是那么好的CSS，抱歉愚蠢的问题。

删除绝对位置，图像显示正确。现在，他们没有对齐。我该如何对齐它们？请看图像。

Answer 1

将position: relative添加到彩色方块。这样top: 10px会再次影响他们。

CSS - 将图像设置为div

1 个答案: