Question

我有三个具有h1内容的div元素。我想要左侧的第一个div，居中的第二个，右侧的第3个，意思是所有行。调整窗口大小（响应度）时，文本不应分成两行，而应仅最小化或最大化每个div之间的间隙。目前，所有三个div都非常接近。它是用wordpress编写的，但这是该部分的代码片段：

<div style="display:inline-block;">
    <h1 style="color: white;">Yaqoob Yawar</h1>
</div>

<div style="display:inline-block;">
    <img src="https://yaqoobyawar.com/wp-content/uploads/2019/12/logo5.png" alt="Yaqoob Yawar">
</div>

<div style="display:inline-block;">
    <h1 style="color: white;">یعقوب یاور</h1>
</div>

它在网址yaqoobyawar.com

上实现

Answer 1

更新您现有的HTML

<div class="slot-c">
    <div style="display:inline-block;">
        <h1 style="color: white;">Yaqoob Yawar</h1>
    </div>
    <div style="display:inline-block;">
        <img src="https://yaqoobyawar.com/wp-content/uploads/2019/12/logo5.png" alt="Yaqoob Yawar" scale="0">
    </div>
    <div style="display:inline-block;">
        <h1 style="color: white;">یعقوب یاور</h1>
    </div>
</div>

使用正在使用Bootstrap 4网格的HTML。

<div class="row">
    <div class="col">
        <h1 style="color: white;">Yaqoob Yawar</h1>
    </div>
    <div class="col" style="text-align: center;">
        <img src="https://yaqoobyawar.com/wp-content/uploads/2019/12/logo5.png" alt="Yaqoob Yawar" scale="0">
    </div>
    <div class="col">
        <h1 style="color: white;">یعقوب یاور</h1>
    </div>
</div>

此外，从其父div中删除d-flex类。

Answer 2

.grid-container {
display: grid;
grid-template-rows: 1fr;/* No. of row You want to create */
grid-template-columns: 1fr 1fr 1fr; /*No. of column you want to create */
}

<div class="grid-container">
<div>
    <h1 >Yaqoob Yawar</h1>
</div>

<div>
    <img src="https://yaqoobyawar.com/wp-content/uploads/2019/12/logo5.png" alt="Yaqoob Yawar">
</div>

<div >
    <h1 >یعقوب یاور</h1>
</div>
</div>

div宽度调整，无需在调整浏览器窗口大小时自动换行

2 个答案: