具有不同文本大小的浮动正在破碎

Question

基本上我有几个li具有不同的文字大小，不需要具有相同的高度。但我喜欢它表现得像一排而不像下图：

我感谢不使用table，flexbox或inline-block的解决方案。

＆＃13;

＆＃13;

* { box-sizing: border-box; }
body { margin: 50px; }

.box {
  background: #eee;
  border-radius: 5px;
  padding: 20px;
}

.box ul {
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

.box li {
  background: #ddd;
  border-radius: 5px;
  float: left;
  margin-bottom: 20px;
  margin-right: 5%;
  padding: 5px;
  width: 30%;
}

.box li:nth-child(3n) { margin-right: 0; }

＆＃13;

<div class="box">
  <ul>
    <li>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis.</li>
    <li>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá, depois divoltis porris, paradis.</li>
    <li>Mussum ipsum cacilds, vidis litro abertis.</li>
    <li>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá, depois divoltis porris, paradis.</li>
    <li>Mussum ipsum cacilds, vidis litro abertis.</li>
    <li>Mussum ipsum cacilds, vidis litro abertis.</li>
    <li>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá, depois divoltis porris, paradis.</li>
    <li>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis.</li>
    <li>Mussum ipsum cacilds, vidis litro abertis.</li>
    <li>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis.</li>
    <li>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá, depois divoltis porris, paradis.</li>
    <li>Mussum ipsum cacilds, vidis litro abertis.</li>
    <li>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá, depois divoltis porris, paradis.</li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这个问题纯粹是因为应用于第三个列表项的css和第三个项并不总是在第三列中。

.box li:nth-child(3n) { margin-right: 0; }

这基本上不保证第三项在第三列。因此，要解决此问题，只需删除上面的样式并将.box li上的margin-right设置为具有较小的百分比值或绝对值，例如15px，如下所示。

在JSFiddle click

上看到这个

* { box-sizing: border-box; }
body { margin: 50px; }

.box {
  background: #eee;
  border-radius: 5px;
  padding: 20px;
}

.box ul {
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

.box li {
  background: #ddd;
  border-radius: 5px;
  float: left;
  margin-bottom: 20px;
  margin-right: 15px;
  padding: 5px;
  width: 30%;
}

我在列表项文本前面添加了数字，这样您就可以看到哪个项目是哪个。正如您可以看到css代码片段，我已将margin-right更改为15px并删除了.box样式。希望这可以帮助。