具有绝对位置的水平中心 div

Question

我在一个section中有3个div。分号的位置是绝对的因为我想让3个分号之间的距离很小，但是当我想让分号水平时什么都不会发生。我该怎么办?

#columnL {
width: 412px;
height: 705px;
position: absolute;
left: 0;
}
#columnM {
width: 412px;
height: 705px;
right: 0;
left: 0;
position: absolute;
}
#columnR {
width: 412px;
height: 705px;
position: absolute;
right: 0;
}

<section id="blabla">
<div id="columnL">
<div id="afbeeldingL">
<img src="https://www.spiralex.nl/wp-content/uploads/2021/01/110-14018-b-Petronas-V2017.jpg">
</div>
<div id="tekstL">
<h1 id="hoofdstuk1">TEXT</h1>
</div>
</div>
<div id="columnM">
<div id="afbeeldingL">
<img src="https://www.spiralex.nl/wp-content/uploads/2021/01/110-14018-b-Petronas-V2017.jpg">
</div>
<div id="tekstL">
<h1 id="hoofdstuk1">TEXT</h1>
</div>
</div>
<div id="columnR">
<div id="afbeeldingL">
<img src="https://www.spiralex.nl/wp-content/uploads/2021/01/110-14018-b-Petronas-V2017.jpg">
</div>
<div id="tekstL">
<h1 id="hoofdstuk1">TEXT</h1>
</div>
</div>
</section>

Answer 1

用相对创建父div定位规则。这样的:

#blabla {
position: relative;
}

表示每个卡的margin: auto—#columnL、#columnM和#columnR。

并为img标签推送width: 100%。这样的:

img {
width: 100%;
}

但是为什么需要绝对定位?

#blabla {
position: relative;
}
#columnL {
width: 412px;
height: 705px;
position: absolute;
left: 0;
margin: auto;
}
#columnM {
width: 412px;
height: 705px;
right: 0;
left: 0;
position: absolute;
margin: auto;
}
#columnR {
width: 412px;
height: 705px;
position: absolute;
right: 0;
margin: auto;
}
img {
width: 100%;
}

<section id="blabla">
<div id="columnL">
<div id="afbeeldingL">
<img src="https://www.spiralex.nl/wp-content/uploads/2021/01/110-14018-b-Petronas-V2017.jpg">
</div>
<div id="tekstL">
<h1 id="hoofdstuk1">TEXT</h1>
</div>
</div>
<div id="columnM">
<div id="afbeeldingL">
<img src="https://www.spiralex.nl/wp-content/uploads/2021/01/110-14018-b-Petronas-V2017.jpg">
</div>
<div id="tekstL">
<h1 id="hoofdstuk1">TEXT</h1>
</div>
</div>
<div id="columnR">
<div id="afbeeldingL">
<img src="https://www.spiralex.nl/wp-content/uploads/2021/01/110-14018-b-Petronas-V2017.jpg">
</div>
<div id="tekstL">
<h1 id="hoofdstuk1">TEXT</h1>
</div>
</div>
</section>

flex解决方案绝对和

定位。这个解决方案中的绝对值是一个额外的父块，具有.absolute类，以及一个灵活的规则，该规则通过gap规则设置缩进。

#blabla {
position: relative;
}
.absolute {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: space-between;
gap: 30px;
}
#columnL {
width: 412px;
height: 705px;
}
#columnM {
width: 412px;
height: 705px;
}
#columnR {
width: 412px;
height: 705px;
}
img {
width: 100%;
}

<section id="blabla">
<div class="absolute">
<div id="columnL">
<div id="afbeeldingL">
<img src="https://www.spiralex.nl/wp-content/uploads/2021/01/110-14018-b-Petronas-V2017.jpg">
</div>
<div id="tekstL">
<h1 id="hoofdstuk1">TEXT</h1>
</div>
</div>
<div id="columnM">
<div id="afbeeldingL">
<img src="https://www.spiralex.nl/wp-content/uploads/2021/01/110-14018-b-Petronas-V2017.jpg">
</div>
<div id="tekstL">
<h1 id="hoofdstuk1">TEXT</h1>
</div>
</div>
<div id="columnR">
<div id="afbeeldingL">
<img src="https://www.spiralex.nl/wp-content/uploads/2021/01/110-14018-b-Petronas-V2017.jpg">
</div>
<div id="tekstL">
<h1 id="hoofdstuk1">TEXT</h1>
</div>
</div>
</div>
</section>