Можно ли использовать таблицы CSS для размещения изображения и текста рядом, не зная заранее ширины изображения? - PullRequest
Новая
       13

Можно ли использовать таблицы CSS для размещения изображения и текста рядом, не зная заранее ширины изображения?

0 голосов
/ 08 марта 2019

Я хочу иметь вертикальный стек блоков;каждый блок имеет изображение слева и текст (заголовок и абзацы) справа.

Я бы хотел, чтобы изображение имело естественную ширину, а текст - оставшуюся ширину в родительском элементе.

Это похоже на таблицу, но изображения в разных блоках имеют разную ширину.Таким образом, первый «столбец» в таблице не имеет постоянной ширины.

Плавающее левое изображение не работает, потому что, если текст имеет большую высоту, чем изображение, текст переносится под изображение.

Таблицы CSS, похоже, не работают, потому что CSS не знает разную ширину изображения от блока к блоку.

Мой элемент "блок" CSS включает в себя «display: table-row;».Мой элемент изображения и мой текстовый элемент CSS включают 'display: table-cell;'.В результате некоторые изображения имеют свои естественные размеры;другие меньше их естественных размеров.

Похоже, это связано с объемом текста: одна строка текста получает изображение естественного размера;две линии сжимают изображение на несколько пикселей;15 строк сжимают изображение примерно до половины размера.

Я бы приветствовал предложения о том, как достичь своей цели.

1 Ответ

0 голосов
/ 27 июня 2019

Я думаю, что это можно решить с помощью дисплея flex. Документация W3C: https://www.w3schools.com/css/css3_flexbox.asp

Попробуйте это:

HTML 

<div class="row" style="width: 100%">
      <img src="https://image.shutterstock.com/image-photo/salesman-offering-cheese-samples-customers-600w-414153787.jpg"/>
      <div>
        <h2>Head</h2>
        <p>
        Suspendisse eu scelerisque odio. Quisque hendrerit malesuada risus ut imperdiet. Nulla facilisi. Aenean bibendum risus et mi rutrum convallis. Phasellus ornare orci leo, eget faucibus tortor egestas at. Aliquam iaculis, metus dignissim vulputate dignissim, est metus condimentum nulla, at maximus neque tellus non erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor, magna ut lacinia blandit, est ligula sagittis nulla, nec interdum erat velit sit amet velit. Sed ut ante at enim accumsan ultricies porta quis neque. Vestibulum volutpat ipsum eget libero malesuada volutpat. Praesent sed porta tellus. Praesent ac volutpat justo.
        </p>
      </div>
    </div>
    <div class="row" style="width: 70%">
      <img src="https://image.shutterstock.com/image-photo/salesman-holding-cutting-board-assorted-260nw-407934532.jpg"/>
      <div>
        <h2>Head</h2>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse luctus massa nec fermentum egestas. Sed feugiat, nisl vitae dictum accumsan, felis odio elementum eros, imperdiet faucibus mi nisi convallis dolor. Mauris interdum maximus neque, in convallis erat facilisis porttitor. Sed ac tortor imperdiet, efficitur nisi nec, efficitur massa. Integer consectetur nec nunc ac porta. Proin non ultricies lorem, rhoncus laoreet ligula. Donec condimentum mauris id urna placerat dapibus. Cras consequat, quam vitae semper luctus, mi tortor finibus augue, sed vestibulum odio lorem at tellus. Fusce eu urna eget ante mollis vestibulum. Nullam ante eros, convallis vitae hendrerit at, volutpat id dui.
        </p>
      </div>
    </div>
    <div class="row" style="width: 80%">
      <img src="https://image.shutterstock.com/image-photo/salesman-offering-cheese-samples-customers-600w-414153787.jpg"/>
      <div>
        <h2>Head</h2>
        <p>
        Suspendisse eu scelerisque odio. Quisque hendrerit malesuada risus ut imperdiet. Nulla facilisi. Aenean bibendum risus et mi rutrum convallis. Phasellus ornare orci leo, eget faucibus tortor egestas at. Aliquam iaculis, metus dignissim vulputate dignissim, est metus condimentum nulla, at maximus neque tellus non erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor, magna ut lacinia blandit, est ligula sagittis nulla, nec interdum erat velit sit amet velit. Sed ut ante at enim accumsan ultricies porta quis neque. Vestibulum volutpat ipsum eget libero malesuada volutpat. Praesent sed porta tellus. Praesent ac volutpat justo.
        </p>
      </div>
    </div>

CSS: 

.row {
  display: flex;
}
.row img {
  flex-grow: 1;
  height: max-content;
}
.row div {
  margin-left: 10px;
}

https://jsfiddle.net/ymuxdtg6/

...