Поместите текст поверх друг друга рядом с изображением

Question

У меня есть следующий html:

    <div class="row">
        <div col-md-9>
            <div>
                <img class="img-valign" src="an image">
                <span class="text1" Style="font-size: 8pt">Text number 1</span> 
                <span class="text1" Style="font-size: 8pt">Text number 2</span> 
            </div>

        </div>

        <div col-md-3>

        </div>
    </div>
</div>

Можно ли таким образом сделать текст номер два ниже текста номер 1, но справа отобраз?Таким образом, второй промежуток идет под изображением.

Answer 1

Этого легко добиться, используя flexbox . Bootstrap также имеет встроенных классов для этого.

Ваша HTML-структура должна быть слегка изменена:

<div class="container">
    <div class="row">
        <div class="col-md-9">
            <!-- justify-content-between makes img and the text list stay left and right -->
            <div class="d-flex flex-row justify-content-between">
                <img />
                <!-- flex-column makes this text list display its children as column -->
                <div class="d-flex flex-column">
                    <span />
                    <span />
                </div>
            </div>
        </div>
    </div>
</div>

демо: https://jsfiddle.net/davidliang2008/gvs8yp6r/6/

Если вы также хотите выровнять текстовый список и изображение по их центру, просто добавьте .align-items-centerк родительскому гибкому контейнеру:

<div class="container">
    <div class="row">
        <div class="col-md-9">
            <!-- this div is the parent flex container -->
            <div class="d-flex flex-row justify-content-between align-items-center">
                <img />
                <div class="d-flex flex-column">
                    <span />
                    <span />
                </div>
            </div>
        </div>
    </div>
</div>

демо: https://jsfiddle.net/davidliang2008/gvs8yp6r/8/

Answer 2

#rightText {
margin-left: 50%;
font-size: 8pt;
}

<div class="row">
        <div col-md-9>
            <div>
                <img class="img-valign" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
                
                <div id ="rightText">
                <span class="text1" Style="font-size: 8pt">Text number 1</span> 
                <br>
                <span class="text1" Style="font-size: 8pt">Text number 2</span> 
          
                </div>
            </div>

        </div>

        <div col-md-3>

        </div>
    </div>
</div>