在div中包裹堆栈li元素

Question

我有这样的HTML：

kafka-console-producer.sh --broker-list localhost:9092 --topic my_topic < my_file.txt

我已经设法看起来像这样：

我想要的外表是这样的：

所以第一个元素比另一个元素大2倍，其余元素应该一个接一个地堆叠，第二个元素通常彼此相邻。

Answer 1

使用float完全可能。

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
}
ul {
  margin: 0;
  width: 400px;
  margin: 25px auto;
  list-style-type: none;
  overflow: hidden;
}
li {
  float: left;
}
.frame {
  width: 100px;
  height: 100px;
  background: rebeccapurple;
  margin: 10px;
}
.large {
  width: 220px;
  height: 220px;
}

＆＃13;

<ul class="edit-list">
  <li>
    <div class="frame large">
    </div>
  </li>
  <li>
    <div class="frame">
    </div>
  </li>
  <li>
    <div class="frame">
    </div>
  </li>
  <li>
    <div class="frame">
    </div>
  </li>
  <li>
    <div class="frame">
    </div>
  </li>
  <li>
    <div class="frame">
    </div>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

注意：对于视觉节奏，我略微增加了“大”的大小。格。