如何对齐文本旁边的图像？答案

【问题标题】：How to align images next to text?如何对齐文本旁边的图像？
【发布时间】：2014-01-16 00:13:48
【问题描述】：

我正在尝试使用 bootstrap 3 创建一个布局，如下所示

我希望发生的事情的 ASCII 艺术，方框是图像。

bunch of texts bunch of texts bunch of texts             ----------------
bunch of texts bunch of texts bunch of texts            |                |
bunch of texts bunch of texts bunch of texts            | ______________ |
bunch of texts bunch of texts bunch of texts            
                                                          ---------------
                                                        |                |
-------------------------------------------------       |                |
|                                               |         ---------------
|                                               | 
|                                               |        ----------------
|                                               |       |                |
|                                               |       |                |
-------------------------------------------------        ----------------

这里是html代码：

<h1 class='title'>Project</h1>
<div class='row'>
    <p class='col-md-5 col-sm-5'> bunch of texts * 20</p>  
</div>
<div class='row'>
    <img class='col-md-7 col-sm-8 img-responsive' src='test1IMG1.png'/>
     <div class='col-md-5 col-sm-4'>
        <img class='img-responsive' src='testIMGsm.png'/>
        <img class='img-responsive' src='test1IMGsm.png'/>
        <img class='img-responsive' src='test1IMGsm.png'/>
     </div>
 </div>

我似乎无法看到文本旁边的小图片。 小图的顶部被向下推以与左边的大图对齐。

我需要让它在 iPad 和桌面上运行。有人可以帮我解决这个问题吗？非常感谢！

【问题讨论】：

你试过vertical-align:top吗？

标签： html css twitter-bootstrap-3 multiple-columns

【解决方案1】：

你有两行，一行是文本，另一行是两列。

如果您希望文本和大图像位于一列，而其他图像位于另一列，请将两列放在一行中。像这样：

<div class='row'>
  <div class='col-md-5 col-sm-5'> bunch of texts * 20
    <img class='col-md-7 col-sm-8 img-responsive' src='test1IMG1.png'/>
  </div>  
   <div class='col-md-5 col-sm-4'>
      <img class='img-responsive' src='testIMGsm.png'/>
      <img class='img-responsive' src='test1IMGsm.png'/>
      <img class='img-responsive' src='test1IMGsm.png'/>
   </div>
</div>

【讨论】：

扩展@MikeLyons 的答案，这里是它的一个小提琴：jsfiddle.net/A7457。基本上只是为每一列使用一个浮点数。

【解决方案2】：

你应该做两列，把大图放在左列。比如：

<div class='col-medium'>
    <p>bunch of texts * 20</p>  
    <img src='test1IMG1.png'>
</div>
<div class='col-small'>
    <img class='img-responsive' src='testIMGsm.png'>
    <img class='img-responsive' src='test1IMGsm.png'>
    <img class='img-responsive' src='test1IMGsm.png'>
 </div>

这就是我的做法，希望对您有所帮助：http://jsfiddle.net/9477x/

【讨论】：