html - 移动 View 中响应居中的 div 不同 View

Question

我不确定如何才能最好地解释这一点。但我现在正在设计布局，并且我已经创建了一个不错的代码。但是，当我测试该网站时，我创建的 3 个 DIV 在移动布局和 PC 布局中显示不同。

这是移动代码

.container1 {
margin:  5px auto;
width: 98%;
text-align:center;
}

.container1 > div {
width: 100%;
}
.col1 {
float: auto;

}
.col2 {
float: auto;

}
.col3 {
margin: auto;

}

div.panel {
width: 100%;

}

这是PC代码

.container1 {
margin:  5px auto;
width: 98%;
text-align:center;
}

.container1 > div {
width: 33%;
}
.col1 {
float: left;

}
.col2 {
float: right;

}
.col3 {
margin: auto;

}

div.panel {
 width: 100%;

}

HTML 是:

<div class="container1">
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
</div>

但是，移动版本显示为Col1 - Col3 - Col2

所以我不确定如何解决这个问题，移动设备也将其显示为 col1、col2、col3。如果我移动 div，它在 PC 版本中显示效果不佳。

希望有人能帮帮忙。

因此，它是 3 个 div 的水平对齐。

Answer 1

没有float: auto。只需在移动版本中将它们都设置为 float: left。然后它们将按照它们在 HTML 代码中的顺序出现。