0

ここに示すように、ブロック レベルのテキスト領域を持つ Bootstrap メディア オブジェクトがあります。Bootstrap のデフォルトのように、overflowプロパティが に設定されhiddenている場合、問題なく表示されます (上の div に示されているように)。しかし、このoverflow選択ライブラリを使用するには可視に設定する必要があり、それを行うと、ブロック レベルの入力が 100% に拡張され、次の行にジャンプします。を使用せずに、画像とテキストエリアの両方を同じ行に保持するにはどうすればよいですか (テキストエリアが残りのスペースを埋めます) 。絶対配置を使用してそれを行う方法は知っていますが、それはさらに多くの問題を引き起こします。overflow: hidden

ブートストラップのデフォルトで機能するコードを次に示しますが、オーバーフローを表示に設定すると機能しません。

<div class='media' style='border: 1px solid black'>
    <a class='pull-left' href='#'>
        <img class='media-object img-rounded' src='http://www.gravatar.com/avatar/4c13c80ca93c714560cd72e628d93939.jpg?d=identicon&s=64' />
    </a>
    <div class='media-body' style='overflow: visible'>
        <textarea class='input-block-level' style='height:64px' ></textarea>
    </div>
</div>
4

1 に答える 1

0

私は最終的にそれを行う簡単な方法を思いつきました。セマンティック Web の純粋主義者は私を嫌うでしょうが、彼らは私を助けようとしなかったので、意見を得ることができません。

<div class='media' style='border: 1px solid black'>
    <table>
        <tr>
            <td>
                <a class='pull-left' href='#'>
                    <img class='media-object img-rounded' src='http://www.gravatar.com/avatar/4c13c80ca93c714560cd72e628d93939.jpg?d=identicon&s=64' />
                </a>
            </td>
            <td>
                <div class='media-body' style='overflow: visible'>
                    <textarea class='input-block-level' style='height:64px' ></textarea>
                </div>
            </td>
        </tr>
    </table>
</div>
于 2013-08-28T17:54:38.100 に答える