Question

我试图将一些内容和图像放在一行中。基本上我想把一行分成两列。

但是段落内的文字占据了整个宽度，因此图像会从空间中掉出来并显示在下一行。

这是我的代码

        <div class="container">
        <div class="row">
            <div class"col-md-6">
                <div class="h3">Hazel</div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras volutpat nulla et luctus scelerisque. Fusce purus enim, auctor non molestie sit amet, congue non eros. Suspendisse bibendum volutpat magna, vel blandit velit ornare a. Fusce vitae lectus a purus ullamcorper consequat.</p><p> Maecenas porta maximus porttitor. Sed ac ipsum faucibus, egestas eros vitae, feugiat nisl. Ut vel odio vel massa iaculis porttitor. Nunc tincidunt nunc et molestie commodo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed tristique dapibus diam, at tristique purus tincidunt vitae. Donec fringilla tempor lectus quis sodales. Sed non dapibus felis.</p>
            </div>
            <div class="col-md-6">
                <img src="img/saree1.png">
            </div>
        </div>    
    </div>

Answer 1

可能的解决方案：使用style="display: inline-block;

       <div class="row">
            <div class"col-md-6" style="display: inline-block;>
                <div class="h3">Hazel</div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras volutpat nulla et luctus scelerisque. Fusce purus enim, auctor non molestie sit amet, congue non eros. Suspendisse bibendum volutpat magna, vel blandit velit ornare a. Fusce vitae lectus a purus ullamcorper consequat.</p><p> Maecenas porta maximus porttitor. Sed ac ipsum faucibus, egestas eros vitae, feugiat nisl. Ut vel odio vel massa iaculis porttitor. Nunc tincidunt nunc et molestie commodo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed tristique dapibus diam, at tristique purus tincidunt vitae. Donec fringilla tempor lectus quis sodales. Sed non dapibus felis.</p>
            </div>
            <div class="col-md-6" style="display: inline-block;>
                <img src="img/saree1.png">
            </div>
        </div>

JSFIDDLE DEMO

无法将一行划分为两列

1 个答案: