Как правильно расположить картинку слева от 2 строк текста в HTML-таблице без переполнения или обрезки?

0

У меня есть веб-страница, и у меня есть данные внутри ячейки таблицы html (точнее, это ячейка таблицы api google orgChart). Я хочу показать изображение слева, а затем справа от него показать 2 строки текста. Изображение имеет ту же высоту, что и 2 строки текста, но, похоже, не выровняется.

Если я захочу получить изображение

float:left

который выравнивает все правильно, но затем текст переполняется за пределы горизонтальной ширины внешней ячейки. Теперь я пытаюсь использовать float: left, чтобы получить правильное выравнивание, а также расширить внешний td для поддержки полной ширины изображения и текста (см. Код ниже)

В худшем случае я могу поместить его в свою собственную таблицу, где изображение находится в td с rowSpan = 2, но я пытался придумать решение без таблицы (учитывая, что другой макет уже является таблицей, поэтому вы хотите избежать вложенных таблицы, так как всегда есть проблемы с производительностью и т.д.

Вот мой код:

 <div class="teamBlock">
    <br><img width="35" src="myimage.png" class="headImage">
    <span class="boldText">My team</span><br/>
    My Level
 </div>

и вот css:

.boldText {
    font-weight: bold;
 }

 .headImage 
 {
  text-align: left;
 }

 .teamBlock 
 {
    display: block;
    text-align: left;
 }
  • 1
    Добавьте свой код, чтобы лучше понять ваш вопрос!
  • 1
    Или создайте скрипку > jsfiddle.net
Показать ещё 1 комментарий
Теги:
image
rows

3 ответа

0

Вы можете выполнить это, поставив изображение и строки текста в div. Например:

HTML:

<div id="container">
    <div id="pic">
        <img>
    </div>
    <div id="row1"></div>
    <div id="row2"></div>
</div>

CSS:

#pic, #row1, #row2 {
    float: left;
}

#container {
    width: 200px; /* width of #pic + #row1/row2 */
}

#pic {
    height: 100px;
    width: 100px;
}

#row1, #row2 {
    width: 100px;
    height: 50px;
}

Пример скрипта JS

Поделиться
  • 0
    Не могли бы вы добавить overflow:auto или overflow:hidden в строке? Или любые другие значения переполнения ?
  • 0
    я попробовал то, что сработало, но теперь текст справа выходит за пределы ячейки таблицы
Показать ещё 7 комментариев
0

Это то, что вы хотите???
скрипка

<div class="main">   
    <img src="http://placehold.it/200x200" />
</div>
Поделиться
0

вы можете использовать divs и стилизовать их с помощью ect полей. чтобы получить точный макет, который вы хотите. Основной пример:

<div style="width:400px; height:200px;">
<img src="../Images/icon-left-panel-compage.png" width="200px" height="200px" style="float:left" />
<div style="width:200px; overflow:auto;">hello my name is brian johnson</div>
<div style="width:200px; overflow:auto;">helloe my name is john brianson</div>
</div>

а затем примените любое верхнее поле, которое вы хотите получить во втором div

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню