html – 围绕div包裹textarea输入

2019年7月2日 268次阅读

我的右上角有一个带有div框的textarea字段.我已经搜索了很多,但我找不到一种方法让输入textarea的文本环绕该div.

有任何想法吗 ？

            
             #wrapper {
                position: relative;
                width: 500px;
                height: 500px;
                }
    
             #logo {
                 
                width: 100px;
                height: 100px;
                position: absolute;
                right: 10px;
                background-color: cyan;
            }
    
             textarea {
                 width: 100%;
                 height: 100%;
             }
<html>
    <head>
        <title></title>
        <meta charset="utf-8"/>
    </head>
    <body>
        <div id="wrapper">
            <div id="logo">LOGO</div>
            <textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam acumsan fringila lacus, in rhoncus ligula pretium eu. Nulam blandit vel quam ut posuere. Sed tincidunt comodo lacinia. Vivamus eget ulamcorper sapien. Phaselus gravida pretium sem, non fringila orci luctus vel. Donec augue sapien, pharetra portitor fringila hendrerit, ultrices in telus. In aliquet laoret turpis vitae ultrices. Praesent eget nula et telus pelentesque suscipit ac eu est. Nula sed imperdiet dui. Donec eficitur est dolor, nec placerat ex posuere pretium.</textarea>
        </div>
    </body>
    </html>

最佳答案 我发现了这个非常古老的讨论：

Unusual shape of a textarea?

给出的答案是在div上使用contenteditable属性.

我设法得到这个代码,似乎是你正在寻找的.

<html>
<head>
    <title></title>
    <meta charset="utf-8" />

    <style>
        #wrapper {
        width: 500px;
        height: 500px;
    }

    #logo {
        width: 100px;
        height: 100px;
        float:right;
        background-color: cyan;
    }

    .textarea {
        width: 100%;
        height: 100%;
    }

    </style>
</head>

<body>
  <div id="wrapper">
      <div id="logo">LOGO</div>
      <div class='textarea' contenteditable='true'>HTML</div>
  </div>
</body>
</html>

我只是替换< textarea>与< div class =’textarea’contenteditable =’true’>和位置：绝对; with float：right;.

点赞