代码之家 › 专栏 › 技术社区 › Renaud is Not Bill Gates

灵活的三列布局

flexbox css html

Renaud is Not Bill Gates · 技术社区 · 4 年前

我想使用flex实现这种结构:

在更小的屏幕上,它会像这样:

请注意,手机上的第一个div是第二个div。

这是我的密码:

.card {
    padding: 24px;
    display: flex;
    width: 400px;
    background-color: #D9FBFF;
    border-radius: 8px;
}

.right {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  
}

.div3 {
  margin-top: auto;
}

.price {
    display: flex;
    align-items: baseline;
    font-size: 20px;
    font-weight: bold;
}

.unit {
  margin-left: 6px;
  font-size: 16px;
  font-weight: normal;
}

.tag {
    background: #D9DEEA;
    border-radius: 7.5px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    display: inline-block;
    padding: 0 6px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: bold;
}

.div3 {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: auto;
    display: flex;
}

li:not(:last-child)::after {
    content: "";
    border-right: 1px solid #D9DEEA;
    height: 14px;
    margin: 0 12px;
}

h2 {
  margin:0;
  margin-bottom: 8px;
}

@media screen and (max-width: 800px) {
  .card {
    flex-direction: column;
  }
  .card > div {
    width: 100%;
  }
  .right {
      align-items: flex-start;
  }
  .div2 {
    margin-bottom: 6px;
  }
  .div1 {
    margin-bottom: 12px;
  }
  
}

<article class="card">
  <div class="div1">
    <h2>This is a title</h2>
    <div class="price">
      <div>800</div>
      <div class="unit">EUR</div>
    </div>
  </div>
  <div class="right">
    <div classs="div2">
      <span class="tag">40% discount</span>
    </div>
    <div class="div3">
      <ul>
        <li>
          <a href="#">LINK 1</a>
        </li>
        <li>
          <a href="#">LINK 2</a>
        </li>
      </ul>
    </div>
  </div>
</article>

实现第一个结构的唯一方法是在容器div中添加第二个和第三个div,但我不知道如何在较小的屏幕上显示第二个div作为第一个div,我认为所有三个div应该处于同一级别,但是,通过这样做,我不知道如何实现第一个结构。

我怎样才能解决这个问题?

0 回复 | 直到 4 年前

G-Cyrillus 4 年前

这是一个网格作业,IE11将需要一个旧的和特定的语法,并设置网格中的每个元素(没有自动流放置可用:()

要在IE11中运行演示: https://jsbin.com/sejazibipu/1/edit?css,output

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
section {
  display: grid;
  grid-template-columns: 3fr 4fr;
  padding: 5vh;
  grid-gap: 5vh;
  margin: auto;
}
section > * {
  border: solid;
  min-height: 40vh; /* demo purpose*/
}
aside {
  grid-row: auto / span 2;
}
@media (max-width: 768px) {
  section {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  section > * {
    grid-row: auto/ span 1;
    min-height: 25vh; /* demo purpose*/
  }
  div:nth-child(2) {
    order: -1;
  }
}

/*  IE */
section {
  display: -ms-grid;
  -ms-grid-columns: 3fr 2.5vh 4fr;
  -ms-grid-rows: auto 2.5vh auto;
}

aside {
  -ms-grid-row-start: 1;
  -ms-grid-row-span: 3;
  -ms-grid-column: 1;
}
div:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}
div:nth-child(3) {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}

@media (max-width: 768px) {
  section {
    -ms-grid-columns: 1fr;
    -ms-grid-rows: auto 2.5vh auto 2.5vh auto;
  }
  section > * {
    -ms-grid-row-span: 1;
    min-height: 25vh; /* demo purpose*/
  }
  aside {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  div:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  div:nth-child(3) {
    -ms-grid-row: 5;
    -ms-grid-column: 1;
  }
}

<section>
  <aside> 1</aside>
  <div> 2</div>
  <div> 3</div>
</section>