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

我不知道我怎么能解释这是最好的。但我现在正在进行版面设计，并且创建了一个好的代码。但是，当我测试网站时，我创建的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 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是：

<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的水平对齐。

来源

2016-10-08 Nagashiwa

为什么你让divs的宽度为100％;如果你想让它们水平对齐？ - 将其更改为33％。并将它们设置为“float：left”。 – pol

请不要将“已解决”或其变体添加到问题标题中，而是将解决问题的答案标记为已接受（通过单击相应答案旁边的勾号，您只能接受一个答案）。如果没有答案能够解决您的问题，并且您自己解决了问题，那么请在解释您的解决方案时发布解答问题的答案，并在倒计时结束时接受答案（两天，我认为）。如果您的解决方案在没有其他上下文和信息的情况下无法理解，请编辑您的问题以添加相关信息。 –

没有float: auto。只需在手机版中将它们全部制作成float: left即可。然后它们将按照它们在HTML代码中的顺序出现。

来源

2016-10-08 14:00:52 Johannes

试试这个使用display: flex;属性的父元素，我们有一个属性order给这个子元素，我们可以很容易的达到你的要求。

working codepen

来源

2016-10-08 14:29:48

尝试此移动：

.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

来源

2016-10-08 16:07:27 Aschab

到底这是我的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>

来源

2016-10-08 19:07:22 Nagashiwa

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

回答

相关问题