css 如何在嵌套容器中将文本环绕图像

gudnpqoy 于 2023-05-19 发布在其他

关注(0)|答案(1)|浏览(106)

我想 Package 图像周围的文字，而图像停留在右上角。
我试过改变一些东西，但无法使它工作。文本仍然像块元素一样工作。如何让它环绕图像？
注：* 标记不应更改 *。

.text-container {
    width: 50%;
    float: left;
}
.img-container {
    width: 50%;
    float: right;
}
.img-container img {
    width: 100%;
    height: auto;
}

<div class="container">
            <div class="text-container">
                <div class="text-container-wrapper">
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Ex deleniti voluptates placeat? Assumenda, magni
                        maiores.
                    </p>
                    <p>
                        Eveniet sunt cupiditate earum iusto, quam excepturi sint
                        veniam ea rerum alias blanditiis repellendus.
                        Voluptatum?
                    </p>
                    <p>
                        Nulla voluptatibus possimus amet quas, ut tempore
                        inventore qui quis sequi reprehenderit repellendus
                        veniam porro?
                    </p>
                    <p>
                        Suscipit beatae rem voluptates dolores. Iste dignissimos
                        exercitationem dolorum placeat necessitatibus
                        accusantium quod neque commodi.
                    </p>
                    <p>
                        Laboriosam, quidem nostrum! Quis consectetur dolor
                        laudantium animi, similique consequuntur minus ab.
                        Fugiat, ipsam ullam.
                    </p>
                </div>
            </div>
            <div class="img-container">
                <div class="img-container-wrapper">
                    <img
                        src="https://basava.codelinden.com/wp-content/plugins/elementor/assets/images/placeholder.png"
                        alt=""
                    />
                </div>
            </div>
        </div>

css

来源：https://stackoverflow.com/questions/76251137/how-to-wrap-text-around-image-in-nested-container

1条答案

按热度按时间

vfh0ocws1#

***如果***移动元素是可能的，有一个解决方案：移动你的图像div * 在 * 文本div里面，它会包裹图像。CSS保持不变。一个div的内容不能“跳”到另一个div中去 Package 它的内容。它们必须在同一水平上。

.text-container {
    width: 100%;
    float: left;
}
.img-container {
    width: 50%;
    float: right;
}
.img-container img {
    width: 100%;
    height: auto;
}

<div class="container">
            <div class="text-container">
                <div class="text-container-wrapper"><div class="img-container">
                <div class="img-container-wrapper">
                    <img
                        src="https://basava.codelinden.com/wp-content/plugins/elementor/assets/images/placeholder.png"
                        alt=""
                    />
                </div>
            </div>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Ex deleniti voluptates placeat? Assumenda, magni
                        maiores.
                    </p>
                    <p>
                        Eveniet sunt cupiditate earum iusto, quam excepturi sint
                        veniam ea rerum alias blanditiis repellendus.
                        Voluptatum?
                    </p>
                    <p>
                        Nulla voluptatibus possimus amet quas, ut tempore
                        inventore qui quis sequi reprehenderit repellendus
                        veniam porro?
                    </p>
                    <p>
                        Suscipit beatae rem voluptates dolores. Iste dignissimos
                        exercitationem dolorum placeat necessitatibus
                        accusantium quod neque commodi.
                    </p>
                    <p>
                        Laboriosam, quidem nostrum! Quis consectetur dolor
                        laudantium animi, similique consequuntur minus ab.
                        Fugiat, ipsam ullam.
                    </p>
                </div>
            </div>
            
        </div>

赞(0）回复(0）举报 2023-05-19

我来回答

css 如何在嵌套容器中将文本环绕图像

1条答案

相关问题

热门标签

最新问答