Images can tile and wrap to fit page width. Can other elements do that?

[IndigoGolem]

I'm making a trading card game kind of like Magic: The Gathering, and i have several web pages that should be filled with pictures of full cards, and text versions of the cards. This would be pretty easy if i just wanted images. <img> elements already do exactly what i want with how lines of them wrap to fit the screen, and if they're all the same size they'll tile into a nice grid.

However, i also want text versions of every card, for screen readers and people with slow internet connections. <details> might be a good way to do this, but those get put on their own lines instead of staying on the same line.

<nobr> seems like it would work until the edge of the screen, when people would start having to scroll sideways to see more cards.

I could put everything in a table but the whole point of this question is that i don't want a fixed number of cells per row.

Adding the text as alt text to the images and scrapping <details> would work, but not well unless there's a way to have formatting there. At least a line break.

In short, i need to make a bunch of <details> elements with images as the summaries display on the same line but still wrap at the end of the screen. How can i? I'm open to using CSS, i just prefer to avoid it where HTML works instead.

[ribose]

a series of <img> elements will be placed on the same line because (by default) they are inline elements! <details> elements get placed on new lines because (by default) they are block elements! here's w3school's page on block and inline elements.

the defaults can be overridden with css! if you want, you could use

Code

details, summary {
  display: inline;
}

to make the details and summary elements display inline. they should still wrap at the end of the page.

[IndigoGolem]

the defaults can be overridden with css!

That is exactly what i was looking for. Thanks very much.