Как поместить 5 делителей в 1 основное деление по горизонтали, и поле между 5 делениями такое же

Question

В настоящее время я создаю системную веб-страницу, в которую нужно поместить 5 делителей в 1 основное деление по горизонтали. Но я хочу, чтобы разница между 5 делениями была равна друг другу при исправлении основного деления. Ниже моя текущая страница выглядит следующим образом:

На приведенном выше изображении я хочу расположить оба 5 div в основном div, что является примером «УСТОЙЧИВОСТЬ» находится на красной линии. Ниже мой текущий код:

<div class="prolist">

<div class="col2 left paddingLR">
    <div class="item2 aligncenter">
    <div class="iteminner bgP">
        <div class="itemcircle"><a href="/financial-summary-p-815/"><img src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/financial.jpg" alt="" /></a></div></div>
    <h5>FINANCIAL Information</h5><a href="/financial-summary-p-815/">read more..</a></div></div>
<div class="col2 left paddingLR">
    <div class="item2 aligncenter">
    <div class="iteminner bgB">
        <div class="itemcircle"><a href="/annual-report-p-817/"><img src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/img-financial-report.jpg" /></a></div></div>
    <h5>ANNUAL<br />
        REPORT</h5><a href="/annual-report-p-817/">read more..</a></div></div>
<div class="col2 left paddingLR">
    <div class="item2 aligncenter">
    <div class="iteminner bgO">
        <div class="itemcircle"><a href="/corporate-calendar-p-823/"><img src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/calendar.jpg" alt="" /></a></div></div>
    <h5>Corporate Calendar</h5><a href="/corporate-calendar-p-823/">read more..</a></div></div>
<div class="col2 left paddingLR">
    <div class="item2 aligncenter">
    <div class="iteminner bgG">
        <div class="itemcircle"><img src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/IR circle picture.JPG" alt="" /></div></div>
    <h5>CORPORATE PRESENTATION</h5><a target="_blank" href="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/IR Presentation/TG Website_English_240420.pdf"> English</a> /<a target="_blank" href="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/IR Presentation/TG Website_Chinese_240420.pdf"> Chinese</a><br />
    </div></div>

<div class="col2 left paddingLR">
    <div class="item2 aligncenter">
    <div class="iteminner bgB">
        <div class="itemcircle"><img src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/sustain_icon.jpg" alt="" /></div></div><br />

    <h5>SUSTAINABILITY</h5><a target="_blank" href="/sustainability/"> read more..</a></div></div>
</div>

, и я хочу позицию, как это: (просто образец)

Может кто-нибудь поможет?

Answer 1

Было бы неплохо, если бы вы дали css, использованный для этой страницы. Итак, вот быстрое исправление, я надеюсь, это сработает:

.prolist {
   display: flex;
   justify-content: space-between;
   flex-direction: row;
   width: 100%;
}

В настоящее время, если вы дали поля для создания пространства между каждым элементом, вы можете удалить это, так как этот код даст вам равные места между ними. Если это не работает, загрузите css, который вы использовали для этой страницы.

Answer 2

Для этого вы можете использовать flex.

.prolist {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   width: 100%;
}