CSS 使inline-block纵向排列,让li纵向排列,当不够空间的时候会换列。
正常情况下如果设置了ul 的宽度,li的高和宽,inline-block之后,li会横向排列,当空间不够会换行。
现在希望把横向换成纵向。
实现的目标:当设置了ul的高度之后li会按列像下排列。当空间不够的时候换列。
用flex布局很容易实现,但是鉴于flex布局的兼容性,所以想问问各位大神 inline-block float这些或者其他的方法可以实现吗?
天蓬老师2017-04-17 11:50:22
<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 and above, supported by modern browsers.
大家讲道理2017-04-17 11:50:22
Nothing is needed, inline-block will automatically wrap lines
https://jsfiddle.net/f48jewqa/1/
PHP中文网2017-04-17 11:50:22
Better compatibility than flex
(Compatible with IE9 and above)
Slightly difficult to maintain.
But you can keep the same look in IE9-IE11 without hacking.
It’s actually better to use 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>
大家讲道理2017-04-17 11:50:22
css has a column attribute
.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;
}