0

我正在尝试使用对齐同一行上的文本块和图像

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

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

4

3 回答 3

1

试一试：http : //jsfiddle.net/YpVnw/5/

我overflow: hidden放在包装纸上。

于 2012-04-19T17:23:36.017 回答
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; }

在此处输入图像描述

于 2012-04-19T17:27:57.217 回答
0

尝试向包含的 div 添加宽度：

.mcone{ height:416px; width: 530px; float:left;}
于 2012-04-19T17:21:46.357 回答