css3 - 關于flex布局的一個問題
問題描述
<p class='box dice1'> <span></span></p><p class='box dice2'> <span></span> <span></span></p> * { padding: 0; margin: 0;}span { display: inline-block; width: 100px; height: 100px; border-radius: 50px; background-color: #000; margin: 10px;}.box { display: inline-flex; width: 360px; height: 360px; border: 2px solid #000; border-radius: 15px;}.dice1 { flex-flow: row wrap; justify-content: center;}.dice2 { flex-flow: row nowrap; justify-content: space-between; align-items: center}

問題>>>>>>>>>>怎么保證這兩個骰子不變的情況下,讓他們對齊,不要一個低一個高
問題解答
回答1:外面再套一層p,然后最外面這層p設定為flex。
像這樣:
<p class='body'> // ..</p>
css加上這么一段:
p.body { display: flex;}回答2:
<p class='box-center-v'> <p class='child box-flex'>文字一</p> <p class='child box-flex'>文字二</p></p>*{ margin:0; padding:0}.box-center-v { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center}.box-flex { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; width: 100%; overflow: hidden;}.child{ margin:10px; line-height:50px; border:3px solid #666; text-align:center}
demo
相關文章:
1. javascript - immutable配合react提升性能?2. javascript - sublime快鍵鍵問題3. javascript - nodejs關于進程間發送句柄的一點疑問4. Apache 已經把網站根目錄的改為allow from all了,但是服務器還是不能訪問?5. 實現bing搜索工具urlAPI提交6. javascript - 移動端上不能實現拖拽布局嗎?7. vue.js - Vue 如何像Angular.js watch 一樣監聽數據變化8. phpstudy8.1支持win11系統嗎?9. 配置Apache時,添加對PHP的支持時語法錯誤10. css - 寫頁面遇到個布局問題,求大佬們幫解答,在線等,急!~

網公網安備