将 2 列布局环绕图像

Question

我正在尝试围绕图像创建 2 列布局但没有成功

这就是我想要的布局：

这是我目前能做的：

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Wrapping an Image with the text
    </title>
      
    <style>
        
        img {
            float: right; 
            margin: 5px;
        }
        p {
            font-size: 20px;
        }
    </style>
</head>
  
<body>
    <h1>Testing</h1>
      
    <div class="square">
        <div> 
            <img style="width: 300px" src="https://picture-origin.rumah123.com/news-content/img/2020/11/01111044/mansion-mewah-5.jpg" alt=""> 
        </div>
        <!-- <div style="column-count: 2">  -->
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor porttitor ligula, eu porta tellus tincidunt vehicula. Nam faucibus facilisis sapien, ac vehicula nulla congue vitae. Phasellus dictum dui a sollicitudin viverra. Morbi nisi turpis, interdum ut tortor in, blandit hendrerit enim. Aenean nisl mi, scelerisque in finibus eget, suscipit sed augue. Ut ac odio non odio laoreet pellentesque vitae sit amet diam. Vivamus eros urna, condimentum et nisi et, pulvinar aliquam risus. Donec auctor justo eu lobortis finibus.

            Proin ultrices bibendum odio, eu sodales metus ultricies a. Nullam a ex neque. Quisque vel justo sed quam rhoncus eleifend a eget lorem. Duis accumsan nibh ullamcorper dolor porttitor suscipit. Sed in orci augue. Proin hendrerit magna sit amet felis efficitur, in consectetur leo luctus. Nulla imperdiet arcu quis neque maximus, vel molestie est rutrum.
        </p>
        <!--</div>-->
    </div>
</body>
  
</html>

如果我用列样式 2 激活 div，布局会像这样乱七八糟：

解决这个问题的方法是什么？已经好几天了，我还没有找到任何解决方案。请帮忙。

更新

抱歉，忘记说句子必须是连续的，所以当一个句子在左栏中没有完成时，它将继续到图像下方的右栏。

Answer 1

尝试使用 table 像这样包装它

img {
    float: right;
    margin: 5px;
}

p {
    font-size: 20px;
}

<table>

    <tr>

        <td  width="70%">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor porttitor ligula, eu porta
                tellus tincidunt vehicula. Nam faucibus facilisis sapien, ac vehicula nulla congue vitae. Phasellus
                dictum dui a sollicitudin viverra. Morbi nisi turpis, interdum ut tortor in, blandit hendrerit enim.
                Aenean nisl mi, scelerisque in finibus eget, suscipit sed augue. Ut ac odio non odio laoreet
                pellentesque vitae sit amet diam. Vivamus eros urna, condimentum et nisi et, pulvinar aliquam risus.
                Donec auctor justo eu lobortis finibus.

                Proin ultrices bibendum odio, eu sodales metus ultricies a. Nullam a ex neque. Quisque vel justo sed
                quam rhoncus eleifend a eget lorem. Duis accumsan nibh ullamcorper dolor porttitor suscipit. Sed in
                orci augue. Proin hendrerit magna sit amet felis efficitur, in consectetur leo luctus. Nulla
                imperdiet arcu quis neque maximus, vel molestie est rutrum.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor porttitor ligula, eu porta
                tellus tincidunt vehicula. Nam faucibus facilisis sapien, ac vehicula nulla congue vitae. Phasellus
                dictum dui a sollicitudin viverra. Morbi nisi turpis, interdum ut tortor in, blandit hendrerit enim.
                Aenean nisl mi, scelerisque in finibus eget, suscipit sed augue. Ut ac odio non odio laoreet
                pellentesque vitae sit amet diam. Vivamus eros urna, condimentum et nisi et, pulvinar aliquam risus.
                Donec auctor justo eu lobortis finibus.

                Proin ultrices bibendum odio, eu sodales metus ultricies a. Nullam a ex neque. Quisque vel justo sed
                quam rhoncus eleifend a eget lorem. Duis accumsan nibh ullamcorper dolor porttitor suscipit. Sed in
                orci augue. Proin hendrerit magna sit amet felis efficitur, in consectetur leo luctus. Nulla
                imperdiet arcu quis neque maximus, vel molestie est rutrum.
            </p>
        </td>

        <td width="40%">
            <img style width="100%"
                src="https://picture-origin.rumah123.com/news-content/img/2020/11/01111044/mansion-mewah-5.jpg"
                alt="">


        </td>
    </tr>



    <tr>

        <td width="60%">

        </td>
        <td width="20%">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias amet adipisci, possimus illo animi
            maiores vitae corrupti. Similique suscipit, unde cupiditate sequi, sed rerum non officiis nisi nesciunt
            quo vero ab reprehenderit quae ad aut saepe voluptate? Aliquam sint similique quibusdam iure
            perspiciatis at quidem facere autem, iste velit in omnis! Atque repudiandae cupiditate ab nemo suscipit
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor porttitor ligula, eu porta
            tellus tincidunt vehicula. Nam faucibus facilisis sapien, ac vehicula nulla congue vitae. Phasellus
            dictum dui a sollicitudin viverra. Morbi nisi turpis, interdum ut tortor in, blandit hendrerit enim.
            Aenean nisl mi, scelerisque in finibus eget, suscipit sed augue. Ut ac odio non odio laoreet
            pellentesque vitae sit amet diam. Vivamus eros urna, condimentum et nisi et, pulvinar aliquam risus.
            Donec auctor justo eu lobortis finibus.

            Proin ultrices bibendum odio, eu sodales metus ultricies a. Nullam a ex neque. Quisque vel justo sed
            quam rhoncus eleifend a eget lorem. Duis accumsan nibh ullamcorper dolor porttitor suscipit. Sed in
            orci augue. Proin hendrerit magna sit amet felis efficitur, in consectetur leo luctus. Nulla
            imperdiet arcu quis neque maximus, vel molestie est rutrum.

        </td>

    </tr>


</table>

Answer 2

    div {
            margin: 2px;
        }

        #app {
            display: flex;
        }

        .vd-grid-left-col {
            display: flex;
            flex-wrap: wrap;
            flex-basis: 70%;
            justify-content: space-between;
        }

        .main {
            width: 100%;
            background-color: blue;
        }

        .vd-grid-right-col {
            display: flex;
            flex-direction: column;
            flex-basis: 30%;
        }

        .feature {
            width: 100%;
            background-color: grey;
        }


        img {
            width: 100%;
            margin: 5px;
        }

        p {
            font-size: 20px;
        }

<!DOCTYPE html>
<html>

<head>
    <title>
        Wrapping an Image with the text
    </title>
</head>
<body>
    <h1>Testing</h1>

    <div id="app">
        <div class="vd-grid-left-col">
            <div class="main">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor porttitor ligula, eu porta
                    tellus tincidunt vehicula. Nam faucibus facilisis sapien, ac vehicula nulla congue vitae. Phasellus
                    dictum dui a sollicitudin viverra. Morbi nisi turpis, interdum ut tortor in, blandit hendrerit enim.
                    Aenean nisl mi, scelerisque in finibus eget, suscipit sed augue. Ut ac odio non odio laoreet
                    pellentesque vitae sit amet diam. Vivamus eros urna, condimentum et nisi et, pulvinar aliquam risus.
                    Donec auctor justo eu lobortis finibus. Proin ultrices bibendum odio, eu sodales metus ultricies a.
                    Nullam a ex neque. Quisque vel justo sed quam rhoncus eleifend a eget lorem. Duis accumsan nibh
                    ullamcorper dolor porttitor suscipit. Sed in orci augue. Proin hendrerit magna sit amet felis
                    efficitur,
                    in consectetur leo luctus. Nulla imperdiet arcu quis neque maximus, vel molestie est rutrum.</p>
            </div>

        </div>
        <div class="vd-grid-right-col">
            <div class="feature">
                <img src="https://thumbs.dreamstime.com/b/environment-earth-day-hands-trees-growing-seedlings-bokeh-green-background-female-hand-holding-tree-nature-field-gra-130247647.jpg"
                    alt="nature" width="500" height="300">
            </div>
            <div class="feature">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor porttitor ligula, eu porta
                    tellus tincidunt vehicula. Nam faucibus facilisis sapien, ac vehicula nulla congue vitae. Phasellus
                    dictum dui a sollicitudin viverra. Morbi nisi turpis, interdum ut tortor in, blandit hendrerit enim.
                    Aenean nisl mi, scelerisque in finibus eget, suscipit sed augue. Ut ac odio non odio laoreet
                    pellentesque vitae sit amet diam. Vivamus eros urna, condimentum et nisi et, pulvinar aliquam risus.                       
                    
                </p>
            </div>
        </div>
    </div>
</body>

Answer 3

把文字分成两段，图片放在第二段，浮动到最上面

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Wrapping an Image with the text
    </title>
      
    <style>
        
        img {
            float: right top; 
            margin: 5px;
        }
        p {  
            font-size: 20px;
        }
    </style>
</head>
  
<body>
    <h1>Testing</h1>
      
    <div class="square">
       <div style="column-count: 2"> 
  
        <p>

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor porttitor ligula, eu porta tellus tincidunt vehicula. Nam faucibus facilisis sapien, ac vehicula nulla congue vitae. Phasellus dictum dui a sollicitudin viverra. Morbi nisi turpis, interdum ut tortor in, blandit hendrerit enim. Aenean nisl mi, scelerisque in finibus eget, suscipit sed augue. Ut ac odio non odio laoreet pellentesque vitae sit amet diam. Vivamus eros urna, condimentum et nisi et, pulvinar aliquam risus. Donec auctor justo eu lobortis finibus.</p>
   <p>   <img style="width: 300px" src="https://picture-origin.rumah123.com/news-content/img/2020/11/01111044/mansion-mewah-5.jpg" alt="">  
            Proin ultrices bibendum odio, eu sodales metus ultricies a. Nullam a ex neque. Quisque vel justo sed quam rhoncus eleifend a eget lorem. Duis accumsan nibh ullamcorper dolor porttitor suscipit. Sed in orci augue. Proin hendrerit magna sit amet felis efficitur, in consectetur leo luctus. Nulla imperdiet arcu quis neque maximus, vel molestie est rutrum.
        </p>

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

Answer 4

哎呀，我终于设法解决了。这是我的解决方案：

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Wrapping an Image with the text
    </title>
      
    <style>
        div {
          column-count: 2;
          position: relative;
          padding-top: 33%;
          font-size: 20px;
          column-gap: 5%;
        }

        div img {
          position: absolute;
          top: 0;
          right: 0;
          width: 47.5%;
        }

        .first-el {
          margin-top: -70%;
        }
    </style>
</head>
  
<body>
    <h1>Testing</h1>
    
    <div>
        <img src="https://picture-origin.rumah123.com/news-content/img/2020/11/01111044/mansion-mewah-5.jpg">

        <p class="first-el">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?orem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
    </div>
</body>
  
</html>

图片绝对定位在右上角。它将被放置在文本之上，所以我在容器中使用 padding-top 并在容器的第一个元素中使用负边距顶部，即 first-el class 来为图像制作 space 。 padding-top 和 margin-top 都以百分比表示，以使房间响应图像的高度。

我希望这可以帮助有类似问题的人。

将 2 列布局环绕图像

Wrap 2 column layout around image

html

css

column-count