css - Bootstrap 2 列垂直对齐 + 1 个图像左对齐 + 1 个图像右对齐

Question

因为我刚刚开始使用 Bootstrap ，所以我并没有取得太大的成功。我正在尝试执行以下操作。2 列，每列都有一个垂直对齐的图像。左列将使图像左对齐，右列将使图像右对齐。

所以当它“响应”时，它看起来像:

我刚刚要理解的代码看起来像这样 - 它垂直对齐但水平对齐不正确:

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

它看起来像:

关于如何让它满足上面的前两张图片，有什么建议吗？谢谢!

Answer 1

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

这是具有更好类的工作代码(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