Css定位2行

Question

      <div classNme={styles.row}>
        <div class={styles.column}></div>
        <div class={styles.column}></div>
        <div class={styles.column}></div>
      </div>
      <div classNme={styles.row}>
        <div class={styles.column}></div>
        <div class={styles.column}></div>
      </div>

我正在创建下面的这个设计。与行列相关的样式就足够了。谢谢

Answer 1

这是最基本的结构：

.row{
  display:flex;
  flex-wrap:wrap;
}
.column{
  flex: 1 0 100%;
  max-width: calc(1 / 3 * 100%);
  margin:auto;
}

演示

.row{
  display:flex;
  flex-wrap:wrap;
}
.column{
  flex: 1 0 100%;
  max-width: calc(1 / 3 * 100%);
  margin:auto;
}

<div class="row">
  <div class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et semper mi. Suspendisse at lobortis ligula. Pellentesque sagittis nisi et eros malesuada, eu tempor eros aliquam. Donec rhoncus ex a dolor tempor ultricies. Curabitur pulvinar sagittis tortor vel varius. Duis in enim volutpat, consectetur tortor eget, convallis quam. Etiam at rutrum augue. Aenean elit augue, varius eu blandit in, porttitor ut risus.</div>
  <div class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et semper mi. Suspendisse at lobortis ligula. Pellentesque sagittis nisi et eros malesuada, eu tempor eros aliquam. Donec rhoncus ex a dolor tempor ultricies. Curabitur pulvinar sagittis tortor vel varius. Duis in enim volutpat, consectetur tortor eget, convallis quam. Etiam at rutrum augue. Aenean elit augue, varius eu blandit in, porttitor ut risus.</div>
  <div class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et semper mi. Suspendisse at lobortis ligula. Pellentesque sagittis nisi et eros malesuada, eu tempor eros aliquam. Donec rhoncus ex a dolor tempor ultricies. Curabitur pulvinar sagittis tortor vel varius. Duis in enim volutpat, consectetur tortor eget, convallis quam. Etiam at rutrum augue. Aenean elit augue, varius eu blandit in, porttitor ut risus.</div>
  <div class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et semper mi. Suspendisse at lobortis ligula. Pellentesque sagittis nisi et eros malesuada, eu tempor eros aliquam. Donec rhoncus ex a dolor tempor ultricies. Curabitur pulvinar sagittis tortor vel varius. Duis in enim volutpat, consectetur tortor eget, convallis quam. Etiam at rutrum augue. Aenean elit augue, varius eu blandit in, porttitor ut risus.</div>
  <div class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et semper mi. Suspendisse at lobortis ligula. Pellentesque sagittis nisi et eros malesuada, eu tempor eros aliquam. Donec rhoncus ex a dolor tempor ultricies. Curabitur pulvinar sagittis tortor vel varius. Duis in enim volutpat, consectetur tortor eget, convallis quam. Etiam at rutrum augue. Aenean elit augue, varius eu blandit in, porttitor ut risus.</div>
</div>

Css定位2行

Css positioning 2 rows

html

css

grid

演示