8
我正試圖在iPad上使用柔性模型來獲得非常簡單的佈局。iPad上的CSS柔性盒佈局
我有一個包含div,應該是中心的內容divs。
除iPad(視網膜)以外,示例代碼在所有瀏覽器和平臺上按預期運行。
在線使用各種iPad仿真器不會重現該問題。我只能在實際的iPad上覆制它。這裏是什麼樣子的截圖:
任何和所有的意見將非常讚賞。
CSS:
.container {
width: 510px;
height: 310px;
background: red;
display: flex;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
flex-direction: row;
flex-wrap: wrap;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items:center;
border: 2px solid;
padding: 5px;
margin: 0;
}
.content {
float: left;
width: 150px;
height: 150px;
background: green;
border: 2px solid;
padding: 0;
margin: 0;
}
.content2 {
float: left;
width: 150px;
height: 150px;
background: blue;
border: 2px solid;
padding: 0;
margin: 0;
}
HTML:
<div class="container">
<div class="content">
<p>Content</p>
</div>
<div class="content2">
<p>Content2</p>
</div>
</div>
謝謝cimmanon。然而,看着你的ipad的例子,內容div仍然沒有居中...... – MNorup
這是對子元素的浮子是罪魁禍首。根據規範,float應該在flex項目上被忽略,但是它會在Webkit 2009的實現中引發奇怪的事情。使用'display:inline-block'代替你的後備。 – cimmanon
你可以使用內聯塊對齊嗎?我現在正在測試視網膜,ipad3和ipad1。無法得到它... – MNorup