html - 你如何在网站的一侧显示 "stick"图像，并将文本与该图像对齐？

Question

我正在尝试制作一个如下所示的网站:

但是我很难将图像“粘贴”在网站的一侧，这样当您更改屏幕宽度时，图像就会随之移动。

我在将内容与图像中心对齐时也遇到了问题。

我正在使用 flexbox，因为它是响应式设计中最简单的。

/*
    flex-column is should activate through a media query after 700px,
    therefore I set max width-700px
*/

    .flex-column{
        display: flex;
        flex-direction: column;
        max-width: 700px;
    }
  
    flex-row{
        display: flex;
        flex-direction: row;
    }

<!--flex-column to make all the divs go under eachother  -->
    <div class="flex-column">
       
<!--1st flex-item-->

        <div class="flex-item">
<!--           I tired to use flex-row to align img and content horizontally-->
            <div class="flex-row">
                <div class="image-wrap">
                    <img src="http://placehold.it/150x150" height="120" width="120" alt="">
                </div>
                <div class="content">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum temporibus nam porro eaque corrupti perferendis enim blanditiis voluptatem molestias perspiciatis fuga facilis suscipit ullam asperiores esse velit minima, earum totam sint quibusdam numquam, doloremque ab provident. Exercitationem 
                </div>
            </div>
        </div>

<!--2nd-flexitem-->

        <div class="flex-item">
<!--           I tired to use flex-row to align img and content horizontally-->
            <div class="flex-row">
                <div class="image-wrap">
                    <img src="http://placehold.it/150x150"  height="120" width="120" alt="">
                </div>
                <div class="content">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum aspernatur non unde repellat molestias eligendi, earum dolore tenetur, nisi eos modi quas sapiente repudiandae exercitationem quaerat ea doloremque possimus vel ipsa doloribus soluta. Veniam voluptas officia laudantium qui cum magnam
                </div>
            </div>
        </div>
        
<!--3rd-flexitem-->

        <div class="flex-item">
<!--           I tired to use flex-row to align img and content horizontally-->
            <div class="flex-row">
                <div class="image-wrap">
                    <img src="http://placehold.it/150x150"   height="120" width="120" alt="">
                </div>
                <div class="content">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem molestiae quas consequatur unde reiciendis saepe, ex hic minima molestias mollitia dolorem cumque dignissimos, debitis, enim soluta repellendus atque ullam qui porro aspernatur! Eaque cupiditate, at magnam aliquam obcaecati 
                </div>
            </div>
        </div>

    </div>

Answer 1

首先，您的 CSS 部分有一个错误:flex-row{而不是:.flex-row{。

有了这些行，它应该适合你:

.flex-row{
    display: flex;
    flex-direction: row;
}    

.flex-item:nth-child(even) .flex-row{
      flex-direction: row-reverse;

  }
}

下次请将其放入 fiddle 中 - 使用起来会更容易 - 这是经过这些编辑后的代码:https://jsfiddle.net/v3zepwLz/3/

.flex-column{
    display: flex;
    flex-direction: column;
    max-width: 700px;
}

.flex-row{
    display: flex;
    flex-direction: row;
}    

.flex-item:nth-child(even) .flex-row{
      flex-direction: row-reverse;
    
  }
}

<!--flex-column to make all the divs go under eachother  -->
    <div class="flex-column">
       
<!--1st flex-item-->

        <div class="flex-item">
            <div class="flex-row">
                <div class="image-wrap">
                    <img src="http://placehold.it/150x150" height="120" width="120" alt="">
                </div>
                <div class="content">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum temporibus nam porro eaque corrupti perferendis enim blanditiis voluptatem molestias perspiciatis fuga facilis suscipit ullam asperiores esse velit minima, earum totam sint quibusdam numquam, doloremque ab provident. Exercitationem 
                </div>
            </div>
        </div>

<!--2nd-flexitem-->

        <div class="flex-item">
            <div class="flex-row">
                <div class="image-wrap">
                    <img src="http://placehold.it/150x150"  height="120" width="120" alt="">
                </div>
                <div class="content">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum aspernatur non unde repellat molestias eligendi, earum dolore tenetur, nisi eos modi quas sapiente repudiandae exercitationem quaerat ea doloremque possimus vel ipsa doloribus soluta. Veniam voluptas officia laudantium qui cum magnam
                </div>
            </div>
        </div>
        
<!--3rd-flexitem-->

        <div class="flex-item">
            <div class="flex-row">
                <div class="image-wrap">
                    <img src="http://placehold.it/150x150"   height="120" width="120" alt="">
                </div>
                <div class="content">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem molestiae quas consequatur unde reiciendis saepe, ex hic minima molestias mollitia dolorem cumque dignissimos, debitis, enim soluta repellendus atque ullam qui porro aspernatur! Eaque cupiditate, at magnam aliquam obcaecati 
                </div>
            </div>
        </div>

    </div>