Question

如图here所示，我有一个Bootstrap媒体对象，其中包含一个块级文本区域。当overflow属性设置为hidden时，默认情况下在Bootstrap中，它显示正常（如顶部div所示）。但是我需要将overflow设置为可见以使用this选择库，当我这样做时，块级输入会扩展到100％并跳转到下一行。如何在不使用overflow: hidden的情况下将图像和文本区域保持在同一条线上（textarea填充其余空间）？我知道如何使用绝对定位来做到这一点，但这只会带来更多问题。

这是默认情况下bootstrap工作的代码，但是当我将溢出设置为可见时则不行。

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

Answer 1

我最终想出了一个简单的方法。语义网纯粹存在会让我讨厌，但由于他们没有试图帮助我，他们没有得到意见。

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

同一行上的图像和块级输入

1 个答案: