Bulma:将图像和文本并排放置在容器中

时间:2017-12-23 10:46:20

标签: html css bulma

我刚开始使用Bulma CSS Framework。但是,我无法并排放置文本和背景图像。背景图像被切断。请帮帮我。

我要添加的图片:enter image description here

以下是代码:

<section class="hero is-halfheight upload-descr" style = "height: 37em">
    <div class="hero-body">     
        <div class="container">
            <div class="clearfix"></div>
            <hr class = "rm-descr-bar" style = "float: left;"></hr>
            <div class="clearfix" style = "clear:both;"></div>
            <h1 class = "title">
                Loren Ipsum
            </h1>
            <div class="content rm-has-medium-size">
                <p class = "upload-descr-exp" aria-live = "polite" aria-atomic = "true">Sounds traditional, right? Loren Ipsum Does<br />Loren ipsum dolar sit amet. Loren Ipsum<br />Loren Ipsum dolar sit amet. Loren ipsum dolar sit amet.<br />Loren Ipsum dolar sit amet.<br />Loren Ipsum dolar sit amet is cool</p>
            </div>
        </div>
    </div>
</section>

我想将图片放在.upload-descr-exp描述的旁边。但它只会被削减。

我试过了:

<section class="hero is-halfheight upload-descr" style = "height: 37em">
    <div class="hero-body">     
        <div class="container" style = "background: url('/img/cover.jpg') no-repeat right">
            <div class="clearfix"></div>
            <hr class = "rm-descr-bar" style = "float: left;"></hr>
            <div class="clearfix" style = "clear:both;"></div>
            <h1 class = "title">
                Loren Ipsum
            </h1>
            <div class="content rm-has-medium-size">
                <p class = "upload-descr-exp" aria-live = "polite" aria-atomic = "true">Sounds traditional, right? Loren Ipsum Does<br />Loren ipsum dolar sit amet. Loren Ipsum<br />Loren Ipsum dolar sit amet. Loren ipsum dolar sit amet.<br />Loren Ipsum dolar sit amet.<br />Loren Ipsum dolar sit amet is cool</p>
            </div>
        </div>
    </div>
</section>

0 个答案:

没有答案