Question

我不确定如何才能最好地解释这一点。但我现在正在进行布局，我已经创建了一个好的代码。然而，当我测试网站时，我确实在移动布局中创建了不同的3D 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 CODE

.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 IS：

<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代码中的顺序显示。

Answer 2

尝试将此display: flex;属性用于父元素，并且我们有一个名为order的属性，为此子元素提供，我们可以轻松地满足您的要求。

working codepen

Answer 3

尝试使用移动设备：

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

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

}
.col2 {
float: left;

}
.col3 {
margin: auto;

}

div.panel {
width: 100%;

}

float have no auto property

Answer 4

最后这是我正在使用的CSS和HTML

.card {
box-shadow: 0px 4px 8px 0px rgba(0,255,24,0.3);
transition: 0.3s;
float: left;
border-radius: 5px;
background-color:#111;
width: 97%;
}

.container1 {
padding-top: 5px;
margin:  0px 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 class="card " id="left">
</div></div>

<div class="col3 ">
<div class="card " id="center">
</div></div>

<div class="col2 ">
<div class="card " id="right">
</div></div>
</div>

响应中心div在移动视图中的不同视图

4 个答案: