Размещение значка на крае границы

Question

Я новичок в CSS и пытаемся добиться следующего эффекта:

У меня есть таблица с короткими текстовыми строками в каждой ячейке, я хочу, чтобы положить 1-N маленьких иконок в середине границ ячеек.

Небольшой эскиз, который может помочь визуализировать:

http://img200.imageshack.us/img200/6506/sketcha.jpg

Я бы для любого благодарностью руководства.

Answer 1

Ваш лучший выбор - вероятно, использовать positon: relative на коробке, поместить значки внутри и использовать положение: абсолютное, чтобы разместить их, не занимая место в содержимом. Как это:

HTML:

<div id="wrapper"> 
    <img id="icon1" src="/path/to/image.png" alt="alt text" /> 
    <img id="icon2" src="/path/to/image.png" alt="alt text" /> 
</div> 

CSS:

#wrapper { position:relative; z-index:1; } 
    #wrapper img { position:absolute; top:-10px; width:20px; height:20px; z-index:10; } 
    #icon1 { right:10px; } 
    #icon2 { right:40px; } 

Что-то в этом роде. Фактические размеры были бы основаны на размере и размещении самих значков, но это выполнило бы работу.

Answer 2

Вот очень простой пример того, как это осуществить. Это было закодировано без каких-либо испытаний, поэтому вам может потребоваться настроить по мере необходимости.

<style type="text/css"> 

    .buttonCell 
    { 
     position: relative; 
    } 

    .button1, .button2 
    { 
     float: right; 
     height: 15px; /* or whatever */ 
     margin-right: 5px; 
     width: 15px; /* or whatever */ 
     top: -8px; /* or whatever */ 
    } 

    .button1 
    { 
     background: url(path/to/image.ext) no-repeat top left; 
    } 

    .button2 
    { 
     background: url(path/to/image.ext) no-repeat top left; 
    } 

</style> 
<table> 
<tbody> 
    <tr> 
     <td class="buttonCell"> 
      <div class="button1"></div> 
      <div class="button2"></div> 
      Text text text 
     </td> 
    </tr> 
</tbody> 
</table> 

Answer 3

Используйте позицию атрибутов CSS: по отношению к стилю TD и позиции: абсолютная вместе с верхней, левой и правой атрибуты в зависимости от обстоятельств на DIV оберточной содержимое.

Вы должны быть способны достичь желаемого эффекта.

Answer 4

, если вы не хотите идти с абсолютным позиционированием, то, возможно, сделать это:

<style type="text/css"> 
    .box {width:200px; height:200px; border:solid 5px #ccc;} 
    .icon1, .icon2 { display:block; width:30px; height:15px; background:black; margin-right:10px; margin-top: -10px; float:left;} 
</style> 


<div class="box"> 
    <span class="icon1"></span> 
    <span class="icon2"></span> 
</div>