html一行显示in line,如何在HTML中使用float/in-line而不使用时断行？ - 一点教程

匿名用户

尝试将元素包装在设置为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;

}

GPS TRACKING

width="400" height="300" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0">

VOLTAGE INDICATOR

SPEEDOMETER

THIS IS THE TEXT