Question

您好我想在#area内插入我的div，但它没有用。

#area {
  width: 400px;
  height: 400px;
  display: flex;
  border: 1px solid red;
}

#area div { flex: 1; }

#exde { background-color: chocolate; }
#right { background-color: aqua; }

<form action="http://www.google.lt" method="get">
  <div id="area">
    <div>
      <label for="exde">This is your text</label><br>
      <textarea name="tekstarea" rows="19" cols="10" id="exde"></textarea>
    </div>
    <div>
      <label for="right">This is your text</label><br>
      <textarea name="tekstarea" rows="19" cols="10" id="right"></textarea>
    </div>
  </div>
</form>

所以，如果有人可以帮助我填补他们每人用巧克力色的#area一半，而另一半用蓝色，我会很感激。

Answer 1

他们这样做：

＆＃13;

#area {width:400px;
		height:400px;
		display:flex;
		border: 1px solid red;}
		
		
#area div {
    flex:1;
    border: 2px solid green;
}
		
#exde {background-color:chocolate;}
#right {background-color:aqua;}

＆＃13;

<form action="http://www.google.lt" method="get">
		
		<div id="area">
			<div><label for="exde">This is your text</label><br>
				<textarea name="tekstarea" rows="19" cols="10" id="exde"></textarea></div>
		<div><label for="right">This is your text</label><br>	
				<textarea name="tekstarea" rows="19" cols="10" id="right"></textarea></div>
		</div>
		
		</form>

＆＃13;

textarea没有，所以你可能想要改变它们的大小。

例如，您可能希望将其添加到css：

#exde, #right {
     min-width: 100%;
     max-width: 100%;
     box-sizing: border-box;
}

Answer 2

＆＃13;

#area {
  width: 400px;
  height: 400px;
  display: flex;
  border: 1px solid red;
}

#area div { flex: 1; }

#exde { background-color: chocolate; width:100%;box-sizing: border-box;}
#right { background-color: aqua; width:100%;box-sizing: border-box;}

＆＃13;

<form action="http://www.google.lt" method="get">
  <div id="area">
    <div>
      <label for="exde">This is your text</label><br>
      <textarea name="tekstarea" rows="19" cols="10" id="exde"></textarea>
    </div>
    <div>
      <label for="right">This is your text</label><br>
      <textarea name="tekstarea" rows="19" cols="10" id="right"></textarea>
    </div>
  </div>
</form>

＆＃13;

以下是您的问题的简单解决方案，为这两个div添加宽度100％和框大小调整：

#exde {background-color:chocolate;width:100%;box-sizing: border-box;}
#right {background-color:aqua;width 100%;box-sizing: border-box;}

box-sizing属性定义了如何计算元素的宽度和高度。

为什么我的div不占#area大小的100％？

2 个答案: