Question

当我经常访问公司网站时，我看到一种常见的模式，左侧有图像，右侧有描述，向下滚动第二列时相反，图像在右侧，左侧的文字，依此类推。

我尝试用 flexbox 创建类似的东西：

:root {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
}

h2 {
  color: #5c3b65;
  font-size: 2.1rem;
}

.about-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

.about-container > * {
  width: 100%;
}

.row {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid green;
  margin: 20px 0 50px;
}

@media (min-width: 52em) {
  [class*="col-"] {
    border: 1px solid orange;
  }

  .col-1 {
    flex: 25%;
  }

  .col-2 {
    flex: 50%;
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="images-oddeven.css">
  <title>Odd and Even</title>
</head>
<body>
  <section class="about">
    <div class="about-container">
      <div class="row">
        <div class="col-1">
          <img src="https://picsum.photos/400" alt="">
        </div>
        <div class="col-2">
          <h2>Title</h2>
          <p>Text</p>
        </div>
      </div>
      <div class="row">
        <div class="col-1">
          <h2>Title</h2>
          <p>Text</p>
        </div>
        <div class="col-2">
          <img src="https://picsum.photos/400" alt="">
        </div>
      </div>
      <div class="row">
        <div class="col-1">
          <img src="https://picsum.photos/400" alt="">
        </div>
        <div class="col-2">
          <h2>Title</h2>
          <p>Text</p>
        </div>
      </div>
    </div>
  </section>
</body>
</html>

但是我确定我的代码不能正常工作，因为我想要图像的宽度为 25%，但图像的位置发生了变化。所以，有时我需要左侧 25% 的列宽，有时需要右侧。

您认为使用 CSS Grid 来解决这个问题会更容易吗？浏览器兼容性对我来说不是问题。我不需要支持 IE11。

Answer 1

保持所有行的 html 相同，并更改偶数行中 col-1 的顺序。

.row:nth-child(2n) .col-1 {
  order: 2;
}

:root {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
}

h2 {
  color: #5c3b65;
  font-size: 2.1rem;
}

.about-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

.about-container>* {
  width: 100%;
}

.row {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid green;
  margin: 20px 0 50px;
}

@media (min-width: 52em) {
  [class*="col-"] {
    border: 1px solid orange;
  }
  .col-1 {
    flex: 25%;
  }
  .col-2 {
    flex: 50%;
  }
  
  .row:nth-child(2n) .col-1 {
    order: 2;
  }
}

<section class="about">
  <div class="about-container">
    <div class="row">
      <div class="col-1">
        <img src="https://picsum.photos/400" alt="">
      </div>
      <div class="col-2">
        <h2>Title</h2>
        <p>Text</p>
      </div>
    </div>
    <div class="row">
      <div class="col-1">
        <img src="https://picsum.photos/400" alt="">
      </div>
      <div class="col-2">
        <h2>Title</h2>
        <p>Text</p>
      </div>
    </div>
    <div class="row">
      <div class="col-1">
        <img src="https://picsum.photos/400" alt="">
      </div>
      <div class="col-2">
        <h2>Title</h2>
        <p>Text</p>
      </div>
    </div>
  </div>
</section>

如果你想使用grid，你可以像下面这样尝试

:root {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
}

.about-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px;
}

.row {
  display: grid;
  grid-template-columns: 25% 1fr; /* or use 50% instad of 1fr */
  margin: 0 0 50px;
}

img {
  max-width: 100%;
}

.row:nth-child(2n) {
  grid-template-columns: 1fr 25%;
}

.row:nth-child(2n) .col-2 {
  grid-area: 1;
}

<section class="about">
  <div class="about-container">
    <div class="row">
      <div class="col-1">
        <img src="https://picsum.photos/400" alt="">
      </div>
      <div class="col-2">
        <h2>Title</h2>
        <p>Text</p>
      </div>
    </div>

    <div class="row">
      <div class="col-1">
        <img src="https://picsum.photos/400" alt="">
      </div>
      <div class="col-2">
        <h2>Title</h2>
        <p>Text</p>
      </div>
    </div>

    <div class="row">
      <div class="col-1">
        <img src="https://picsum.photos/400" alt="">
      </div>
      <div class="col-2">
        <h2>Title</h2>
        <p>Text</p>
      </div>
    </div>

  </div>
  <!-- / .about-container -->
</section>
<!-- / .about -->

Answer 2

我喜欢使用 display: flex;如果您将两个 div 放在一个具有显示 flex 的 div 中，并将它们的宽度设置为 50%，它应该可以工作。

此外，您可以在 flex 中下订单。这是一篇有用的文章 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我目前没有可以展示的片段，但这篇文章包含了一些方法来做你想做的事。

如何重新创建“左侧图像，右侧文本”和“左侧图像右侧的文本”模式？

2 个答案: