如何使用 CSS Media Queries 將圖像置於文本下方？

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;這樣的東西top: -320px; 不應存在於“寫得很好”的 css 中。 如果你需要做這樣的事情，你可能需要重新考慮 HTML 結構。

反正。 改變元素位置的最簡單方法是使用 flexbox。 您可以將文本和 img 包裝在一個div並在桌面上使用display:flex; flex-direction:row 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 Media Queries 將圖像置於文本下方？

問題描述

1 個解決方案

解決方案1
1 已采納 2021-07-03 12:29:52

如何使用 CSS Media Queries 將圖像置於文本下方？

問題描述

1 個解決方案

解決方案1 1 已采納 2021-07-03 12:29:52

解決方案1
1 已采納 2021-07-03 12:29:52