Bootstrap 2列垂直对齐+ 1图像对齐左对齐+ 1图像对齐

我没有太大的成功，因为我刚开始玩bootstrap。我正在尝试执行以下操作。 2列各有一个垂直对齐的图像。左列将图像左对齐，右列将右对齐图像。Bootstrap 2列垂直对齐+ 1图像对齐左对齐+ 1图像对齐

enter image description here

所以当它是“有求必应”，它看起来像：

enter image description here

，我刚才去了解它看起来像这样的代码 - 它是垂直排列而不是水平排列正确：

<div class="container" > 
     <div class="col-md-6"> 
      <div style="display:table; height:100px;"> 
       <div style="display:table-cell; vertical-align:middle; "> 
        <div style="float:left;"> 
         <img src="http://tarheelreader.org/theme/images/reviewed.png" /> 
        </div> 
       </div> 
      </div>    
     </div> 
     <div class="col-md-6"> 
      <div style="display:table; height:100px;"> 
       <div style="display:table-cell; vertical-align:middle;"> 
        <div style="float:right;"> 
         <img src="http://tarheelreader.org/theme/images/reviewed.png" /> 
        </div> 
       </div> 
      </div>    
     </div> 
    </div>

它看起来像： enter image description here

关于如何让它满足上面的前两个图像的任何建议？谢谢！

来源

2014-02-21 Mike Stone

可以为您提供一个小提琴锻炼？ –

这是因为你没有向左或向右漂浮好元素。

这里是一个较好的一类（pull-right和pull-left）

<div class="container" > 
     <div class="col-md-6"> 
      <div style="display:table; height:100px;" class="pull-left"> 
       <div style="display:table-cell; vertical-align:middle; "> 
        <div> 
         <img src="http://tarheelreader.org/theme/images/reviewed.png" /> 
        </div> 
       </div> 
      </div>    
     </div> 
     <div class="col-md-6"> 
      <div style="display:table; height:100px;" class="pull-right"> 
       <div style="display:table-cell; vertical-align:middle;"> 
        <div> 
         <img src="http://tarheelreader.org/theme/images/reviewed.png" /> 
        </div> 
       </div> 
      </div>    
     </div> 
    </div>

bootply工作代码：http://www.bootply.com/115806

来源

2014-02-21 18:51:18 pbenard

非常感谢你！我一直在思考浮法。我一直在尝试不同的变化......这是绝对错误的。谢谢你的帮助。 –

Bootstrap 2列垂直对齐+ 1图像对齐左对齐+ 1图像对齐

回答

相关问题