Arrange picture from right to left in Blazor

Question

Each picture have TextBox at bottom.Somebody help

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

 <p></p>

@foreach (var image in images)
{
    <p>
    <img src=@($"/Images/{image}") asp-append-version="true": style="left; margin-left:10px; width=300px" />
    </p>

    <div class='e-input'>
            <input class='e-input' Placeholder='' type='text' />
    </div>

    <p></p>
}
@code {
    // Define the list of image file names%
    private readonly List<string> images = new()
    {
        "H_1.jfif",
        "H_2.jfif",
        "H_3.jfif",
    };

}

Answer 1

Hi @MIPAKTEH_1 , you can try my codes below:

@page "/test"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
 <p></p>
 <div style="overflow:hidden; ">
    @foreach (var image in images)
    {
        <div style="margin:10px 20px; float:left;">
            <img src=@($"/Images/{image}") asp-append-version="true" : style="width=100px;height:100px;" />
            <div class='e-input' style="margin-top:5px; width:120px;">
                <input class='e-input' style="width:100%" Placeholder='' type='text' />
            </div>
        </div>
    }
 </div>
@code {
    // Define the list of image file names%
    private readonly List<string> images = new()
    {
        "Picture1.png",
        "Picture2.png",
        "Picture3.png",
    };
}

Adding float:right for the inner element and add overflow:hidden for the parent element will make the images display from right to left. float:left will make the images display from left to right.

===========================

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Tiny