时间戳

首页 > 解决方案 > 如何将 5 个 div 水平放置在 1 个主 div 中，并且 5 个 div 之间的边距相同

html - 如何将 5 个 div 水平放置在 1 个主 div 中，并且 5 个 div 之间的边距相同

问题描述

目前，我创建了一个需要在 1 个主 div 中水平放置 5 个 div 的系统网页。但是，我希望 5 div 之间的边距在修复主 div 时彼此相等。以下是我当前页面的样子：

在此处输入图像描述

从上图中，我想将 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>

我想要这样的职位：（只是一个样本）

在此处输入图像描述

任何人都可以帮忙吗？

标签： htmlcss

解决方案

如果您提供了用于此页面的 css，那就太好了。所以这是一个快速修复，我希望它有效：

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

目前，如果您已为每个元素之间创建空间提供了边距，则可以将其删除，因为此代码将为您提供相等的空间。如果这不起作用，请上传您用于此页面的 css。

推荐阅读