3

この問題はGoogleChromeでのみ見つかりました。単純なテキスト以外の要素（<strong>、<em>...）は<img>、同じ行にあるのに適切に配置されていません。

ここに画像の説明を入力してください

ちなみにやってみました

  • vertical-align:middle、<img>または一部line-heightでは、結果は完全ではありません。
  • 他のタグが写真のように配置されているように見えるため、結果はvertical-align:top写真のaで問題ありません（これはクレイジーです...）。しかし、私は写真がvertical-align:middle...であることを望みます
  • vertical-alignにaを指定しなくても、結果は問題ありませんtable-cell。

このフィドルをチェックできます

CSS

img {height:25px;}
.table {display:table;width:400px;}
.left {display:table-cell;width:30%;padding:10px;background:#CCC;}
.right {display:table-cell;width:70%;padding:10px;background:#EDEDED;
vertical-align:top;}

HTML

<div class="table">

    <div class="left">Left content</div>

    <div class="right">
        Some text some text, some text, some text, 
        some text, some text, some text, and a 
        <strong>bold text</strong>, then a pic : 
        <img src="some_pic_url"/>
        and <em>italic</em>
    </div>

</div>

他の要素が写真の下部に揃っているようです...

この醜い問題についてのアイデア、および垂直方向のテキストがどのブラウザでも正しく整列するように修正する方法はありますか？

4

3 に答える 3

0

バグのように見えますが、画像に同じ垂直方向の配置を追加することで修正できます。

.right img {vertical-align:top;}

http://jsfiddle.net/J8ved/1/

于 2013-03-10T19:18:18.963 に答える
0

"表示：テーブルセル"; はdivからカスケードされ、含まれているテキストノードにも適用されますが、含まれているstrongノードとemノードにはカスケードされていません。

テキストをスパンタグでラップすると、テキストがカスケードされた「display：table-cell」を取得するのを防ぐことができます。

于 2013-03-10T19:17:04.893 に答える
0

div多くのソリューションをテストした後、内に別の要素を追加せずにこの問題を修正する簡単な方法は、内の各要素に位置をtable-cell指定することであるように思われます。vertical-aligntable-cell

以下を追加するように：

.right * {vertical-align:top;}

この場合、写真は他の要素とは別の位置を保つことができます。

于 2013-03-10T19:17:19.103 に答える