Question

我正在尝试创建一个带有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和桌面上运行。有人可以帮我解决这个问题吗？非常感谢！

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

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

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

2 个答案: