在不使用<；br>；在html中？

我有三个部分在同一行：GPS跟踪，电压指示器和速度表

我想转到这三个部分下面的那一行。为此，我使用了一堆

标记，因为如果我不使用它们，我的“这是文本”将放在速度表标题旁边及其下方的矩形

如何避免使用

标记

.baris{
浮动：左；
宽度：30%；
左边距：10px；
文本对齐：居中；
}
.矩形{
宽度：400px；
高度：300px；
边框：1px实心#000；
}

GPS跟踪
电压指示器
速度计






































这是文本

您的文本位于float元素下，您需要清除它，一种方法是在文本正文中清除它

.baris{
浮动：左；
宽度：30%；
左边距：10px；
文本对齐：居中；
}
.矩形{
宽度：400px；
高度：300px；
边框：1px实心#000；
}
.我的副本{
明确：两者皆有；
}

GPS跟踪
电压指示器
速度计
这是文本

请尝试将元素包装在设置为“显示：内联flex”的flex容器中。Flexbox可以帮助您进行布局，并且比float更易于使用

此外，设置

justify content:space equality

将使用父元素的可用宽度均匀地分隔项目。请随意查看文档，以获取其他选项，您可以将这些选项传递到

justify content

我认为来自MDN的这个示例将对您有很大帮助（并且布局看起来与您尝试复制的布局相似）：

.flexcontainer{
显示：内联flex；
对正内容：空间均匀；
}
巴里斯先生{
浮动：左；
宽度：30%；
左边距：10px；
文本对齐：居中；
}
.矩形{
宽度：400px；
高度：300px；
边框：1px实心#000；
}

GPS跟踪
电压指示器
速度计
这是文本

你好，山姆！我建议您阅读一些关于如何布局html的内容，这是您目前遇到的问题。编写更好的html和css代码非常重要，这将在将来为您节省大量时间。这可能是一个获得良好基础知识的地方：。对于此布局问题，我将使用flexbox模型：