Question

我有一个包含50％背景图片的盒子。现在我想在其余的50％框中插入文本，以便文本不会覆盖图片。

我会告诉你我做了什么。现在，文字覆盖了图像。但我希望文字正好在图像下方。

HTML：

<p id="p_box1">Text goes under the image . Text goes under the image
    <br/>Text goes under the image . Text goes under the image
    <br/>Text goes under the image . Text goes under the image
    <br/>Text goes under the image . Text goes under the image
    <br/>
</p>

.CSS：

#p_box1 {
    padding: 18px 2%;
    border: 3px solid Crimson;
    float: left;
    /*
    width: 29.333333%;
    */
    width: 20.333333%;
    margin: auto 2%;
    margin-left:120px;
    border-radius:7px;
    -webkit-border-radius:7px;
    -moz-border-radius:7px;
    -ms-border-radius:7px;
    -o-border-radius:7px;
    background:url("img_in/box_img_1.jpg") no-repeat;
    background-size: 100% 50%;
}

Answer 1

您可以尝试增加p_box1的填充类似填充：50％2％0 2％;

哪个应该在你的顶部买一些填充空间，它可能会增加盒子的高度，你可以根据需要减少高度，或者将文本换成另一个div或p并给它边缘50％或者你需要多少...... 如果您有一个jsfiddle示例或一些实时链接，我们可以提供明确的解决方案...

Answer 2

这似乎不可能仅使用css。你还应该考虑javascript。为了解决这个问题，我将div包含在内容中，在css中进行了更改，并在javascript中添加了一些代码。

以下是HTML代码：

<div id="p_box1">
    <div class="main">Text goes under the image . Text goes under the image
        <br/>Text goes under the image . Text goes under the image
        <br/>Text goes under the image . Text goes under the image
        <br/>Text goes under the image . Text goes under the image
        <br/>
    </div>
</div>

<强> CSS

#p_box1 {
    padding: 18px 2%;
    border: 3px solid Crimson;
    float: left;
    /*
    width: 29.333333%;
    */
    width: 20.333333%;
    /*original starts*/
    margin: auto 2%;
    /*original ends*/
    margin-left:120px;
    border-radius:7px;
    -webkit-border-radius:7px;
    -moz-border-radius:7px;
    -ms-border-radius:7px;
    -o-border-radius:7px;
    background:url("http://lorempixel.com/200/200") no-repeat;
    background-size: 100% 50%;
}
.main {
    transform: translateY(100%);
}

<强>的Javascript

var main = document.getElementsByClassName('main')[0];
var container = document.getElementById('p_box1');

function adjustImage() {
    var height = main.offsetHeight * 2 + "px";
    container.style.height = height;
}
adjustImage();

window.onresize = adjustImage;

<强> Example fiddle

如何在一个盒子里写文字，使它只覆盖盒子的50％？

2 个答案: