html - CSS 使inline-block縱向排列
問題描述
CSS 使inline-block縱向排列,讓li縱向排列,當(dāng)不夠空間的時候會換列。
正常情況下如果設(shè)置了ul 的寬度,li的高和寬,inline-block之后,li會橫向排列,當(dāng)空間不夠會換行。
現(xiàn)在希望把橫向換成縱向。

實現(xiàn)的目標(biāo):當(dāng)設(shè)置了ul的高度之后li會按列像下排列。當(dāng)空間不夠的時候換列。用flex布局很容易實現(xiàn),但是鑒于flex布局的兼容性,所以想問問各位大神 inline-block float這些或者其他的方法可以實現(xiàn)嗎?
問題解答
回答1:<style type='text/css'> ul, li {margin: 0;padding: 0; } ul {height: 300px;line-height: 0;font-size: 0;-ms-writing-mode: tb-lr;-webkit-writing-mode: vertical-lr;writing-mode: vertical-lr; } li {display: inline-block;width: 100px;height: 100px;border-radius: 10px;line-height: 100px;text-align: center;font-size: 20px;color: #fff;background: #ff0000;-ms-writing-mode: lr-tb;-webkit-writing-mode: horizontal-tb;writing-mode: horizontal-tb; }</style><ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li></ul>
IE8及以上、現(xiàn)代瀏覽器支持.
回答2:什么都不需要,inline-block 本來就會自動換行啊
https://jsfiddle.net/f48jewqa/1/
回答3:兼容性比 flex 好點(兼容 IE9 及以上)稍難維護。但不用 Hack 就可以在 IE9-IE11 中保持一個樣子。其實用 JavaScript 更好……
.itemContainer { width: 150px;overflow: auto; padding-left: 40px; -ms-transform: rotate(270deg) matrix(-1,0,0,1,0,0); transform: rotate(270deg) matrix(-1,0,0,1,0,0); font-size: 13px;color: white; list-style: none; font-family: 'Roboto', Roboto;}.item { -ms-transform: rotate(270deg) matrix(-1,0,0,1,0,0); transform: rotate(270deg) matrix(-1,0,0,1,0,0); height: 20px;width: 30px;margin: 10px 0; background: #039be5; text-align: center;line-height: 20px; display: inline-block;}
<ul class='itemContainer'> <li class='item'>1</li> <li class='item'>2</li> <li class='item'>3</li> <li class='item'>4</li> <li class='item'>5</li> <li class='item'>6</li> <li class='item'>7</li> <li class='item'>8</li></ul>

css有個分列的column屬性
.itemContainer { width:100px; column-count:2;}.item { height: 20px; width: 30px; margin: 10px 0; background: #039be5; text-align: center; line-height: 20px; display: inline-block;}
相關(guān)文章:
1. mac里的docker如何命令行開啟呢?2. 關(guān)docker hub上有些鏡像的tag被標(biāo)記““This image has vulnerabilities””3. nignx - docker內(nèi)nginx 80端口被占用4. docker容器呢SSH為什么連不通呢?5. 為什么我ping不通我的docker容器呢???6. Docker for Mac 創(chuàng)建的dnsmasq容器連不上/不工作的問題7. angular.js使用$resource服務(wù)把數(shù)據(jù)存入mongodb的問題。8. docker-compose 為何找不到配置文件?9. javascript - 最近用echarts做統(tǒng)計圖時遇到兩個問題!!10. docker gitlab 如何git clone?

網(wǎng)公網(wǎng)安備