html - floatを使用して下部の画像とテキストを垂直方向に揃えます

Question

を使用して、テキストのブロックと画像を同じ行に配置しようとしています

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

これは機能しますが、スパンを右にフロートするとすぐに、垂直方向の整列が機能しなくなります。誰でも手を貸してください
。テキストを下に整列させ、青いスパンを右にフロートさせようとしています
。jsfiddle.net/nalagg/YpVnw/2/

Answer 1

使用しているディスプレイのタイプに一貫性がありません。「ラッパー」div では、display:block; を使用しています。内部コンテンツ（img、span）については、display:table-cellを使用しています（親divにtable-rowを指定せずに、table-rowの親divにdisplay:tableを指定していません）

これを試して：

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

これを試してみてください：http://jsfiddle.net/YpVnw/5/

overflow: hiddenラッパーにセットしました。

Answer 3

含まれている div に幅を追加してみてください。

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