如何重新创建该“左侧图像，右侧文本"?以及“在左侧的右侧图像上的文本"和“在左侧的右侧图像上的文本".图案? [英] How to recreate that "image on the left, text on the right" and "text on the right image on the left" pattern?
问题描述
当我经常访问公司的网站时，我看到了一种常见的模式，其中左侧有一个图像，右侧有描述，当我向下滚动第二列时，图像在右侧，左侧的文本，依此类推.
When I often visit websites of companies I saw that common pattern where there is an image on the left side and the description the right side, as I scroll down the second column is the opposite, the image is on the right side and the text on the left side, and so on.
我尝试用flexbox创建类似的东西:
I tried creating something simimlar with 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％的列宽.
However I'm sure my code doesn't work properly because I want that 25% width for images but the position of images change. So, sometimes I need that 25% column width on the left side, sometimes on the right side.
您认为使用CSS Grid进行处理会更容易吗?浏览器兼容性对我来说不是问题.我不需要IE11的支持.
Do you think would it be easier to approach this with CSS Grid? Browser compatibility is not an issue to me. I don't need support for IE11.
推荐答案
对所有行保留相同的html，并在偶数行中更改 col-1 的顺序.
Keep the same html for all rows and change the order of col-1 in even rows.
.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 ，可以尝试以下操作
If you want to use grid, you can try like below
: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 -->这篇关于如何重新创建该“左侧图像，右侧文本"?以及“在左侧的右侧图像上的文本"和“在左侧的右侧图像上的文本".图案?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
