Question

我正在为“团队”页面工作，并且有三个团队成员。第1列第1列是图像，第1列第2列是文本，第2列第1列是文本，第2列第2列是图像，第3列第1列是图像，第3列第2列是文本

因此，团队成员的图像彼此是对角线，文本紧靠图像。所有图像尺寸相同。我希望图像的角彼此接触并且所有列/行的大小均相同。任何帮助表示赞赏：）

我所拥有的：

我想要什么：

没有排水沟：

 <body>
    <div id="team" class="container-fluid">
        <div class="row">
            <div class="col">
                <img src=".\images\name1_A0_Rectangle_8_pattern.png" alt="Image"/>
            </div>
            <div class="col">
                <span class="team-title">Developer</span>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <span class="team-title">Developer</span>
            </div>
            <div class="col">
                <img src=".\images\name2_A0_Rectangle_10_pattern.png" alt="Image"/>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <img src=".\images\ProfilePicture_A0_Rectangle_12_pattern.png" alt="Image"/>
            </div>
            <div class="col">
                <span class="team-title">Designer</span>
            </div>
        </div>
    </div>
</body>

Bootstrap网格列未逐一对齐

0 个答案: