javascript - 将图像相对放置在文本上方或下方。

Question

这是一个非常荒谬的问题，但现在已经困扰了我一段时间。我正在设计这个 website我刚刚结束响应/移动 View 。目前它看起来还不错，但那是因为我用 display : none: 删除了图像，当视口(viewport)变得太小以至于图像看起来不好时。 (可以在 drleilamasson.com/css/responsive.css 看到蜜蜂)

我想更改的图片是书(在书本部分下)和鹦鹉(在社交部分下)如果我不删除它们，它们只会浏览我拥有的文本/嵌入帖子并阻止内容.我想要发生的是书籍图像完全居中放置在文本上方。我一直在摆弄这些图像的样式，但始终无法弄清楚。

希望大家能想通!谢谢:)

Answer 1

您已经在 <section id="about"> 上设置了一个 flexbox parent , 所以我们可以根据 children 的方向和顺序进行游戏。

@media (max-width: 1065px) {
  #about {
    flex-direction: column; /* stack the children */
  }

  .leila-book-img {
    ...
    display: none; <-- remove
    margin: 0 auto;
    order: 2; /* put the image container after the text */
  }

  .about-content {
    padding-bottom: 1em;
  }
}