小编Tro*_*roy的帖子

我在使用flexbox布局时遇到了一些麻烦.我想要实现的是下面的图像是如何定位的.但是,使用边距和填充,我可以将元素移动到正确的位置,而不会发生剧烈的事情.

我可能不正确地接近这个.如果有人可以给我一些建议并解释如何正确地做到这一点会很好.

线框

现在怎么样

HTML

<div style="background: grey;">
    <div class="parent-container" style="flex-direction: column; align-items: center; margin: 10px;">
        <div class="aelia-text child33">
            The first of it's kind, to<br/>
            create a better customer<br/>
            journey with reduced<br/>
            collection waiting time and<br/>
            a special moment that makes<br/>
            even the most jet-lagged<br/>
            shopper smile.
        </div>
        <div class="child33">
            <div class="img-wrapper" ng-style="{'background-image':'url(/assets/Aelia_Robot_highres006.jpg)'}"></div>
        </div>
        <div class="child33">
            <div class="img-wrapper" ng-style="{'background-image':'url(/assets/AELIA_IMAGE.jpg)'}"></div>
        </div>
    </div>
</div>

CSS

.aelia-text {
    background: white;
    color: black;
    font-size: 1.5vw;
    font-family: portland-medium-font; 
    -ms-flex-pack: center; 
    justify-content: center;
    -ms-flex-align: center;
    align-items: …

我现在对某些东西感到有点难过,我有下面的代码按预期工作,一切都很好.但是我想做一些小改动,因为我希望以下函数能够在文本本身中插入html标记,即;

var str = "Let's get Future Ready!";
var split = str.split("");
var counter = 0;

var SI = setInterval(function() {

    var typeText = $('.typetext');
    typeText.append(split[counter]);
    counter++
    if(counter == str.length){clearInterval(SI)}

},100)

所以此刻,这个函数接受一个数组,split,然后使用我已遍历字符串长度的setInterval方法.这允许文本看起来像被键入.

正如你所看到的,我的str的初始值是'var str ="让我们准备好Future!";'

但是我想在我的str值中添加一个中断'var str ="让我们
准备好Future!"

首先是可能的吗？其次,如果有人能给我一些建议,我将不胜感激,谢谢.