Question

我的右上角有一个带有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>

Answer 1

我发现了这个非常古老的讨论： Unusual shape of a textarea?

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

我设法让这个代码看起来像你正在寻找的。

<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%;
    }
    
    <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>

</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'>，将position: absolute;替换为float:right;。

围绕div包裹textarea输入

1 个答案: