如何在父级高度超过

Question

我正在努力使用列和行，并且无法使其工作，这是我需要的示例：

这是我的css：

ul.people {
 position: absolute;
 width: 900px;
 height: 640px;
 top: 450px;
 right: 318px;
 list-style: none;
 overflow: hidden;
}

li.man-red {
 width: 45px;
 height: 132px;
 background: url(../img/man_red.png) no-repeat;
 background-position: 3px 5px;
}

所以，我需要每隔五个li元素进入一个新列。

Answer 1

我设法使用以下方法提出了一些聪明的东西：

• float:left;
• 使用top＆amp;的相对定位left协调
• 否定margin-left

示例：

＆＃13;

＆＃13;

li.man-red {
 position: relative;
 float: left;
 width: 45px;
 height: 132px;
 margin: 1px;
 color: #fff;
 font-weight: bold;
 background: url(../img/man_red.png) no-repeat #f00;
 background-position: 3px 5px;
 list-style-type: none;
}


li.man-red:nth-of-type(4n+1) {
top: 0;
left: 0;
}

li.man-red:nth-of-type(4n+2) {
top: 134px;
left: -47px;
}

li.man-red:nth-of-type(4n+3) {
top: 268px;
left: -94px;
}

li.man-red:nth-of-type(4n+4) {
top: 402px;
left: -141px;
}

li.man-red:nth-of-type(4n+5) {
margin-left: -140px;
}

li.man-red:nth-of-type(4n+6) {
margin-left: -93px;
}

li.man-red:nth-of-type(4n+7) {
margin-left: -46px;
}

li.man-red:nth-of-type(4n+8) {
margin-left: 1px;
}

＆＃13;

<ul>

<li class="man-red">1</li>
<li class="man-red">2</li>
<li class="man-red">3</li>
<li class="man-red">4</li>

<li class="man-red">5</li>
<li class="man-red">6</li>
<li class="man-red">7</li>
<li class="man-red">8</li>

<li class="man-red">9</li>
<li class="man-red">10</li>
<li class="man-red">11</li>
<li class="man-red">12</li>

<li class="man-red">13</li>
<li class="man-red">14</li>
<li class="man-red">15</li>
<li class="man-red">16</li>

<li class="man-red">17</li>
<li class="man-red">18</li>
<li class="man-red">19</li>
<li class="man-red">20</li>

</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你想要达到的目标是什么？在每个li

中添加5 ul组

段

＆＃13;

＆＃13;

ul {
  display: inline-block;
  background:lightblue;
  margin:0;
  padding:0;
}
.figure {
  width: 45px;
  height: 132px;
  margin: 1px;
  background: url(//lorempixel.com/45/132) no-repeat red;
  background-position: 3px 5px;
  list-style-type: none;
}

＆＃13;

<ul>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
</ul>
<ul>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
</ul>
<ul>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
</ul>
<ul>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
</ul>
<ul>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
</ul>
<ul>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
</ul>
<ul>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
</ul>
<ul>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
</ul>
<ul>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 3

要回答我自己的问题，我设置了这个样式，它确实有效：

ul.people {
  position: absolute;
  width: 900px;
  height: 640px;
  top: 450px;
  right: 318px;
  list-style: none;
  overflow: hidden;
  -webkit-columns: 20;
  -moz-columns: 20;
  columns: 20;
  -webkit-column-gap: 0; 
  -moz-column-gap: 0; 
  column-gap: 0;
  -webkit-column-rule: 0; 
  -moz-column-rule: 0; 
  column-rule: 0;
}

li.man-red {
  width: 45px;
  height: 132px;
  background: url(../img/man_red.png) no-repeat;
  background-position: 3px 5px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}