html - 在文本旁边移动图像

Question

我正在寻找的是图像移动到 ID 为 t1 的文本旁边。所以我应用了一些 CSS 代码来做到这一点，但它不起作用。

这是我的代码片段:

var TxtType = function (el, toRotate, period) {
    "use strict";
    this.toRotate = toRotate;
    this.el = el;
    this.loopNum = 0;
    this.period = parseInt(period, 10) || 2000;
    this.txt = '';
    this.tick();
    this.isDeleting = false;
};

TxtType.prototype.tick = function () {
    "use strict";
    var i = this.loopNum % this.toRotate.length;
    var fullTxt = this.toRotate[i];

    if (this.isDeleting) {
        this.txt = fullTxt.substring(0, this.txt.length - 1);
    } else {
        this.txt = fullTxt.substring(0, this.txt.length + 1);
    }


    this.el.innerHTML = '<span class="wrap">' + this.txt + '</span>';

    var that = this;
    var delta = 200 - Math.random() * 100;

    if (this.isDeleting) {
        delta /= 2;
    }

    if (!this.isDeleting && this.txt === fullTxt) {
        delta = this.period;
        this.isDeleting = true;
    } else if (this.isDeleting && this.txt === '') {
        this.isDeleting = false;
        this.loopNum++;
        delta = 500;
    }

    setTimeout(function () {
        that.tick();
    }, delta);
};

window.onload = function () {
    "use strict";
    var elements = document.getElementsByClassName('typewrite');
    for (var i = 0; i < elements.length; i++) {
        var toRotate = elements[i].getAttribute('data-type');
        var period = elements[i].getAttribute('data-period');
        if (toRotate) {
            new TxtType(elements[i], JSON.parse(toRotate), period);
        }
    }
    // INJECT CSS
    var css = document.createElement("style");
    css.type = "text/css";
    css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
    document.body.appendChild(css);
};

#t1, #t2 {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 40px;
    padding-top: 54px;
    padding-bottom:  54px;
    color: white;
}

#img4 {
    float: right;
    image-orientation: flip;
}

<div class="row">
    <div class="col-md-12" id="gradiente2">
        <p id="t1" class="typewrite" data-period="2000" data-type='[ "En nuestra institución siempre nos preocupamos por brindarte lo mejor"  ]'>
            <span class="wrap"></span>
        </p>
        <p id="t2" class="typewrite" data-period="2000" data-type='[ "Síempre le Ponemos Corazón, a lo que hacemos" ]'>
            <span class="wrap"></span>
        </p>
        <img src="imagenes/kangura.png" id="img4">
    </div>
</div>

我的网站截图:

我翻转了图像，但它没有正确的填充。
这是 CSS:

#img4 {
    float: right;
    padding-right: 283px;
    padding-top: 43px;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
}

Answer 1

您应该将袋鼠图像代码移到 div 的前面，因为 float 会与它后面的文本和其他代码交互。

<div class="row">
    <div class="col-md-12" id="gradiente2">
        <img src="imagenes/kangura.png" id="img4">
        <p id="t1" class="typewrite" data-period="2000" data-type='["En nuestra institución siempre nos preocupamos por brindarte lo mejor"]'>
            <span class="wrap"></span>
        </p>
        <p id="t2" class="typewrite" data-period="2000" data- type='["Síempre le Ponemos Corazón, a lo que hacemos"]'>
            <span class="wrap"></span>
        </p>
    </div>
</div>