響應中心在移動視圖中的不同視圖

我不知道我怎麼能解釋這是最好的。但我現在正在進行版面設計，並且創建了一個好的代碼。但是，當我測試網站時，我創建的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

響應中心在移動視圖中的不同視圖

回答

相關問題