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 为此也有built-in classes。

您的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添加到父级flex容器中即可：

<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>

将文字彼此叠加在图片旁边

2 个答案: