My Razor page currently showcases a series of thumbnail images stacked in a vertical position:
@foreach (var photo in Model)
{
<div>@photo.PhotoId</div>
<div>@photo.Title</div>
<div>
<img src="@photo.LargeSquareThumbnailUrl" alt="Many cups!" />
</div>
}
I am eager to rearrange these images horizontally on a single row. In the case that there is an overflow issue, I would like to implement a horizontal scrollbar.
While I understand that CSS may help with handling overflow, I am struggling to determine how to initially stack the images in a row. Any guidance or suggestions would be greatly appreciated!