响应式列表布局，其中包含来自

Question

我有一个动态项目列表，其中一些可能有一个图标，其中一些没有。我需要从顶部内部元素填充，这些元素没有图标并位于元素具有图标的行中。项目的宽度是固定的，图标高度也是固定的。所以＆＃34;网格＆＃34;可能包含不同的列数取决于屏幕宽度。 像这样的东西： 是否可以制作这种布局？怎么做？

<div class="container">
  <div class="item">
    <div class="dynamic-content-1">
      Lorum ipsum
    </div>
  </div>

  <div class="item item_with-icon">
    <div class="icon"></div>
    <div class="dynamic-content-2">
      Lorum ipsum
    </div>
  </div>

  <div class="item">
    <div class="dynamic-content-1">
      Lorum ipsum
    </div>
  </div>

  <div class="item">
    <div class="dynamic-content-1">
      Lorum ipsum
    </div>
  </div>

  <div class="item">
    <div class="dynamic-content-2">
      Lorum ipsum
    </div>
  </div>

  <div class="item">
    <div class="dynamic-content-1">
      Lorum ipsum
    </div>
  </div>

  <div class="item">
    <div class="dynamic-content-3">
      Lorum ipsum
    </div>
  </div>

  <div class="item">
    <div class="dynamic-content-2">
      Lorum ipsum
    </div>
  </div>

  <div class="item item_with-icon">
    <div class="icon"></div>
    <div class="dynamic-content-1">
      Lorum ipsum
    </div>
  </div>
</div>

更新

我需要一个解决方案，其中块被拉伸到整行高度。如果有人需要简单的对齐，如图所示 Codepen

Answer 1

我想我理解：在没有顶部（“固定高度”）框的行上，应删除顶部填充（如图中所示）。当行中没有顶盒时，应该没有间隙。

我不相信这可以单独用CSS完成。由于元素是动态包装的，因此每行的项数会有所不同。 CSS无法在此场景中定位元素，因为在HTML / CSS parent containers don't know when child elements wrap中。

您需要一个JavaScript解决方案。