如何使用 CSS 媒体查询使图像位于文本下方？

Question

我有一个文本和一个重叠的图像。当触发媒体查询时，我可以编写什么代码使图像位于文本下方。我尝试将该文本设为块元素，以便图像位于下方，但什么也没发生。

我也尝试制作容器的 flex-direction 列，但也没有做出任何改变

这是代码

<!DOCTYPE html>
<html lang="en" class="html">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Shivansh</title>
    <style>
        * {
            margin: 0px;
        }
        
        html {
            scroll-behavior: smooth;
        }
        /* width */
        
        .homeimgandtextcont {
            display: flex;
            flex-wrap: wrap;
        }
        
        .homeimg {
            width: 799.557px;
            height: 640px;
            position: relative;
            left: 50%;
        }
        
        .homeheading {
            width: 100px;
            height: 67px;
            position: relative;
            top: 16rem;
            color: black;
            font-family: 'serif';
            font-size: 52px;
            margin-left: 19px;
        }
        
        .hometext {
            position: relative;
            top: -320px;
            color: black;
            font-family: 'serif';
            margin-left: 24px;
        }
    </style>
</head>

<body>


    <section class="sectionhome" id="sectionhome">
        <div class="homecont">

            <div class="homeimgandtextcont">


                <h1 class="homeheading">
                    Sample
                </h1>
                <img class="homeimg" src="https://expo8.netlify.app/logoo.png" alt="Image">
                <p class="hometext">
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta culpa vero iure autem provident nobis doloremque, ducimus dolore, dicta praesentium tenetur, sunt eius officia et sit magni iste. Esse, quisquam.
                </p>
            </div>



        </div>
    </section>
</body>
</html>

Answer 1

您的 CSS 有点令人困惑。 top: -320px; 之类的东西不应该存在于“好文”css 中。如果您需要做那样的事情，您可能需要重新考虑 HTML 结构。

无论如何。更改元素位置的最简单方法是使用 flexbox。您可以将文本和 img 包装在 div 中，对于桌面使用 display:flex; flex-direction:row 以及在您的媒体查询中，您可以使用 flex-direction:column 。所以图像将在文本之后（下方）。

检查下面的示例或jsfiddle并根据您的具体需要进行调整

div {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
}

img, p {
  flex: 0 0 50%;
  }


@media only screen and (max-width:320px) {
      div {
            flex-direction: column;
      }
      img,p {
          flex: 0 0 100%
          }
}

<div class="homeimgandtextcont">
  <p class="hometext">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta culpa vero iure autem provident nobis doloremque, ducimus dolore, dicta praesentium tenetur, sunt eius officia et sit magni iste. Esse, quisquam.
  </p>
  <img class="homeimg" src="https://via.placeholder.com/150" alt="Image" />
</div>

如何使用 CSS 媒体查询使图像位于文本下方？

How can I make an image go below the text using CSS Media Queries?

html

css

media-queries