Форум на Исходниках.RU https://forum.sources.ru Форум на Исходниках.RU Форум на Исходниках.RU https://forum.sources.ru/index.php?showtopic=386592&view=findpost&p=3410542 Wed, 05 Feb 2014 13:00:01 +0000 Растянуть DIV по ширине картинки https://forum.sources.ru/index.php?showtopic=386592&view=findpost&p=3410542 fatalist HTML, CSS https://forum.sources.ru/index.php?showtopic=386592&view=findpost&p=3410520 Wed, 05 Feb 2014 12:24:48 +0000 Растянуть DIV по ширине картинки https://forum.sources.ru/index.php?showtopic=386592&view=findpost&p=3410520
Можете проверить
http://codepen.io/anon/pen/rKnld]]> S.Eugene HTML, CSS https://forum.sources.ru/index.php?showtopic=386592&view=findpost&p=3410299 Wed, 05 Feb 2014 04:39:37 +0000 Растянуть DIV по ширине картинки https://forum.sources.ru/index.php?showtopic=386592&view=findpost&p=3410299 width:auto ? :blink:
display:inline-block; ? :rolleyes:]]> fatalist HTML, CSS https://forum.sources.ru/index.php?showtopic=386592&view=findpost&p=3410283 Tue, 04 Feb 2014 22:48:26 +0000 Растянуть DIV по ширине картинки https://forum.sources.ru/index.php?showtopic=386592&view=findpost&p=3410283
    div.imgdiv {
      float: left;
      border: 1px dotted green;
      padding: 0.6em;
      margin: 0em 1em 1em 0em;
    }
     
    <div class="imgdiv">
      <img src="">
      <div class="imgcaption">Описание картинки</div>
    </div>


Размер картинки неизвестен. Как сделать, чтоб imgdiv растягивался по ширине картинки, но не по ширине текста описания?

С таблицей так получается, но хочу на дивах сделать.

    table.imgtable_left {
      float: left;
      border: 1px dotted green;
      padding: 0.6em;
      margin: 0em 1em 1em 0em;
    }
     
    <table class="imgtable_left"><tbody><tr><td>
     <img src="">
      <div class="imgcaption">Описание картинки</div>
    </td></tr></tbody></table>


Добавлено
С двумя дивами получается.

        div.imgdivtable {
          display: table;
          width: 0px;
          float: left;
          border: 1px dotted green;
          margin: 0em 1em 1em 0em;
        }
     
        div.imgdivtd {
          display: table-cell;
          padding: 0.6em;
        }
        
        <div class="imgdivtable">
          <div class="imgdivtd">
            <img src="">
            <div class="imgcaption">Описание картинки</div>
          </div>
        </div>


Можно ли ставить width: 0px;? Не будет ли глюков в каких-то браузерах?

Можно ли ставить элемент display: table-cell; внутри display: table; минуя элемент с display: table-row?
Написано, что для Safari 3.1 значение table-cell не работает, если нет элементов со значениями свойства display: table и table-row.

Нельзя ли как-то нормально все сделать без костылей?]]> S.Eugene HTML, CSS