Question

IMAGE OF THE PROBLEM 结果就是这样。我希望文本不与图像重叠。

Answer 1

有点不清楚你想做什么，但我认为z-index会起作用：

            <div class="container-fluid" id="circle_div"></div>

            <div class="container" id="div">
                <div class="container box"><h3>Apple</h3>
                    <div id="box1"></div>
                    <p class="mytext">Lorem Ipsum ...Lorem Ipsum.</p>

                </div>
                <div class="container box"><h3>Orange</h3>
                    <p class="mytext">Lorem Ipsum ...Lorem Ipsum.</p>
                </div>
                <div class="container box"><h3>Banana</h3>
                    <p class="mytext">Lorem Ipsum ...Lorem Ipsum.</p>
                </div>
                <div class="container box"><h3>Mango</h3>
                    <p class="mytext">Lorem Ipsum ...Lorem Ipsum.</p>
                </div>
            </div>

            <style>
                .mytext{
                    z-index:1000
                }
            </style>

Answer 2

我不确定您要如何放置图像。但是你可以使用＆＃39; float＆＃39;来实现图像周围的包装文本。 css中的财产。

<强> HTML：

<div id="container">
    <img src="http://images.all-free-download.com/images/graphiclarge/natural_beauty_highdefinition_picture_166133.jpg"/>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi.</p>
</div>

的CSS：

img {
    float: left;
    margin: 0 20px 20px 0;
    width: 160px;
    height: 150px;
}

p {
    text-align: justify;
    text-indent: 2em;
}

这是jsfiddle

有关详情，google＆＃39; float＆＃39; css中的财产。

如何调整图像周围的文字以避免重叠

2 个答案: