垂直对齐底部img和使用float的文本

Question

我正在尝试使用

在同一行上对齐文本块和图像

display:table-cell; vertical-align:bottom;

这样可行，但只要我将跨度向右浮动，垂直对齐就会停止工作 任何人都可以伸出援助之手 我正在尝试将文本对齐到底部并将蓝色跨度浮动到右侧 继承我的小提琴：http://jsfiddle.net/nalagg/YpVnw/2/

Answer 1

给这一个：http://jsfiddle.net/YpVnw/5/

我在包装器上设置了overflow: hidden。

Answer 2

您使用的显示器类型不一致。对于“包装器”div，您使用的是display：block;然后对于内部内容（img，span），你正在使用display：table-cell（没有为父div指定表行，而display：table表示行表的父div）

试试这个：

<div id="table">
        <div id="table-row">
            <div class="table-cell">
                <img src="http://beta.images.theglobeandmail.com/archive/01397/web-verizon_jpg_1397343cl-8.jpg" alt="" width="412" height="416" class="valign-middle"/>
            </div>
            <div class="table-cell valign-bottom bgcolor">
                <span class='georgia'> Tkquis, dignissim sit amet erat. Cras quis diam s leo vel urna dignissim blandit. Ut ultrices, turpis dolor&nbsp; ntum nulla, eget euismod nisi met, eget euismod nisi metus sit amet nisl. Cu amet nisl. asdCum vitae nisi interdum elit sagittis vestibsulum. volutpat por ttitor. Vestibulum interdum, dolor eget ultridfadfsces ultrices,er turpis m vitae nisi interdum </span>
            </div>
        </div>
    </div>

#table { display: table; }
#table-row { display: table-row; }
.table-cell { display: table-cell; }
.valign-bottom { vertical-align: bottom; }
.valign-middle { vertical-align: middle; }
.bgcolor { background-color: #00CCCC; }

Answer 3

尝试为包含div添加宽度：

.mcone{ height:416px; width: 530px; float:left;}