将 HTML 个元素列表转换为列

Question

我有以下 HTML 代码（包装器和元素列表）

<div class="items">
  <div class="item">
  1. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</div>
  <div class="item">
  2. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  <div class="item">
  3. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
  <div class="item">
  4. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</div>
  <div class="item">
  5. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
  <div class="item">
  6. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
</div>

我想使用 CSS:

真正的挑战是，这只能使用 CSS 来解决，因为我使用的是 AMP 而我无法访问 JS。

到目前为止我在这里：

.items {
  margin: 0 -10px
}

.items:after {
  display: table;
  content: ''
}

.items .item {
  width: calc(50% - 42px);
  float: left;
  padding: 10px;
  margin: 0 10px 10px 10px;
  border: 1px solid blue
}

<div class="items">
  <div class="item">
    1. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</div>
  <div class="item">
    2. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  <div class="item">
    3. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
  <div class="item">
    4. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</div>
  <div class="item">
    5. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
  <div class="item">
    6. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
</div>

Answer 1

试试这个：

.items {
    margin: 0 -10px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}

.items {
  margin: 0 -10px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

.items:after {
  display: table;
  content: ''
}

.items .item {
  width: calc(50% - 42px);
  float: left;
  padding: 10px;
  margin: 0 10px 10px 10px;
  border: 1px solid blue
}

<div class="items">
  <div class="item">
    1. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</div>
  <div class="item">
    2. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  <div class="item">
    3. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
  <div class="item">
    4. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</div>
  <div class="item">
    5. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
  <div class="item">
    6. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
</div>

Answer 2

您可以将其设置为两列网格。

显然您需要设置间隙和填充以适合您的使用。

.items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3vw;
}

.item {
  border: solid blue 1px;
  display: inline-block;
  height: fit-content;
  padding: 1vw;
}

<div class="items">
  <div class="item">
    1. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</div>
  <div class="item">
    2. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  <div class="item">
    3. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
  <div class="item">
    4. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</div>
  <div class="item">
    5. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
  <div class="item">
    6. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
</div>

Answer 3

试试这个

.items {
    margin: 0 -10px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}
.items .item {
  width: calc(50% - 42px);
  float: left;
  padding: 10px;
  margin: 0 10px 10px 10px;
  border: 1px solid blue
}
enter code here

<div class="items">
  <div class="item">
    1. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</div>
  <div class="item">
    2. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  <div class="item">
    3. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
  <div class="item">
    4. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</div>
  <div class="item">
    5. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
  <div class="item">
    6. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
</div>

将 HTML 个元素列表转换为列

Convert an HTML list of elements into columns

html

css