Question

我必须在两个不同的<textarea>中创建两个<div>，并且两者都必须以单行形式出现。在所有类型的屏幕中，<textarea>都必须占据100％的宽度（每个50％）。

然而，当我尝试第二个<textarea>时，右侧溢出，甚至我无法管理<textarea>的右边距（在CSS中）。如何避免<textarea>的右溢？

＆＃13;

.container {
  background-color: lightblue;
  border: 5px solid black;
  min-height: 500px;
}
textarea {
  width: 100%;
  height: 100%;
  border: 3px none #cccccc;
  margin: 10px 10px 10px 10px;
  border: 1px solid black;
}
.left {
  float: left;
  width: 50%;
}
.right {
  float: left;
  width: 50%;
}

＆＃13;

<div class='left'>
  <textarea>left </textarea>
</div> 
<div class='right'>
  <textarea>right</textarea>
</div>

＆＃13;

Answer 1

请注意保证金更改为textarea。应该这样做！

.container {
  background-color: lightblue;
  border: 5px solid black;
  min-height: 500px;
}
textarea {
  width: 100%;
  height: 100%;
  border: 3px none #cccccc;
  margin: 10px 0px 10px 0px;
  border: 1px solid black;
}
.left {
  float: left;
  width: 50%;
}
.right {
  float: left;
  width: 50%;
}

<div class='left'>
  <textarea>left</textarea>
</div>
<div class='right'>
  <textarea>right</textarea>
</div>

Answer 2

您必须从margin中移除textarea，因为margin从元素的外部宽度计算出来，您可以使用padding代替.conatiner。

并添加box-sizing属性以从计算宽度

中删除边框宽度

＆＃13;

html,body,.container{
  height:100%;
  margin:0;
}
.container{ 
  background-color: lightblue;
  border: 5px solid black;
  padding:10px;
  display: table;
  width: 100%;
  box-sizing: border-box;
} 
textarea { 
  width: 100%;
  height: 100%;
  border: 3px none #cccccc;
  border: 1px solid black;
  box-sizing: border-box;
} 
.left{ 
  display: table-cell;
  width:50%;
  height: 100%;
} 
.right{ 
  display: table-cell; 
  width:50%;
  height: 100%;
}

＆＃13;

<html>
  <body>
<div class="container">
<div class='left'>
  <textarea>left </textarea>
</div> 
<div class='right'>
  <textarea>right</textarea>
</div>
  </div>
    </body>
  </html>

＆＃13;

Answer 3

删除保证金。因为您要为每个左右文本区分配50％。所以你的总宽度将是100％+ 10px;所以它会在x轴上溢出

textarea {
width: 100%;
height: 100%;
border: 3px none #cccccc;
border: 1px solid black;
}

Answer 4

从textarea中删除边距，因为边距是从元素的外部宽度计算出来的，并给出display：table;到容器。

Answer 5

您可以为此使用 iframe。如果您使用 iframes，您可以将溢出调整为隐藏左侧和右侧

如何在css中管理textarea右侧溢出？

5 个答案: