我在同一行中做了3个部分:（GPS跟踪，电压指示器，速度计），我想去那3个部分下面的下一行。 请注意，我使用了一组
null
.baris {
float: left;
width: 30%;
margin-left: 10px;
text-align: center;
}
.rectangle {
width: 400px;
height: 300px;
border: 1px solid #000;
}<div class="baris">
<h1>GPS TRACKING</h1>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d5635.9118897681665!2d101.7364976658753!3d2.759584154684244!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31cdc0f650a70f95%3A0x11a68c649e6f0e9d!2sSepang%20F1%20Circuit%20Pit%20Lane!5e0!3m2!1sid!2sid!4v1592872331420!5m2!1sid!2sid"
width="400" height="300" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
<div class="baris">
<h1>VOLTAGE INDICATOR</h1>
<div class="rectangle"></div>
</div>
<div class="baris">
<h1>SPEEDOMETER</h1>
<div class="rectangle"></div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p style="text-align: center;">THIS IS THE TEXT</p>null
尝试将元素包装在设置为display:inline-flex的flex容器中。 Flexbox可以帮助您进行布局，而且比Float更容易操作。
此外，设置justify-content:space-evenly将使用父元素的可用宽度均匀地分隔项目。 请随意检查文档中可以传递给justify-content的其他选项。
我认为来自MDN的这个示例将对您有很大帮助（并且布局看起来与您试图复制的布局类似）:https://developer.mozilla.org/en-us/docs/learn/css/css_layout/flexbox。
null
.flexcontainer {
display: inline-flex;
justify-content: space-evenly;
}
.baris {
float: left;
width: 30%;
margin-left: 10px;
text-align: center;
}
.rectangle {
width: 400px;
height: 300px;
border: 1px solid #000;
}<body>
<div class='flexcontainer'>
<div class="baris">
<h1>GPS TRACKING</h1>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d5635.9118897681665!2d101.7364976658753!3d2.759584154684244!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31cdc0f650a70f95%3A0x11a68c649e6f0e9d!2sSepang%20F1%20Circuit%20Pit%20Lane!5e0!3m2!1sid!2sid!4v1592872331420!5m2!1sid!2sid"
width="400" height="300" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
<div class="baris">
<h1>VOLTAGE INDICATOR</h1>
<div class="rectangle"></div>
</div>
<div class="baris">
<h1>SPEEDOMETER</h1>
<div class="rectangle"></div>
</div>
</div>
<p style="text-align: center;">THIS IS THE TEXT</p>
</body>
你的文本在一个浮点元素下面，你需要清除它，一种方法就是在你的文本正文中清除它
null
.baris {
float: left;
width: 30%;
margin-left: 10px;
text-align: center;
}
.rectangle {
width: 400px;
height: 300px;
border: 1px solid #000;
}
.my-copy {
clear: both;
}<div class="baris">
<h1>GPS TRACKING</h1>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d5635.9118897681665!2d101.7364976658753!3d2.759584154684244!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31cdc0f650a70f95%3A0x11a68c649e6f0e9d!2sSepang%20F1%20Circuit%20Pit%20Lane!5e0!3m2!1sid!2sid!4v1592872331420!5m2!1sid!2sid"
width="400" height="300" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
<div class="baris">
<h1>VOLTAGE INDICATOR</h1>
<div class="rectangle"></div>
</div>
<div class="baris">
<h1>SPEEDOMETER</h1>
<div class="rectangle"></div>
</div>
<p class="my-copy" style="text-align: center;">THIS IS THE TEXT</p>
因为您使用的是浮动，所以您需要使用某种形式的清除修复来清除它们。 请看这个css技巧的例子，因为它是完美的解决方案。
https://css-tricks.com/snippets/css/clear-fix/
谢谢，格伦
