[英]Why doesn't my divs take up 100% of the #area size?
您好,我想将我的div插入#area
内,但#area
。
#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
与巧克力色,另一半用蓝色,我会感激。
他们是这样:
#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;}
<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>
textarea
的不是,因此您可能想要更改其大小。
例如,您可能想要将此添加到您的css
:
#exde, #right {
min-width: 100%;
max-width: 100%;
box-sizing: border-box;
}
#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;}
<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>
这是您问题的一种简单解决方案, 将宽度100%加上框大小设置为两个div ,如下所示:
#exde {background-color:chocolate;width:100%;box-sizing: border-box;}
#right {background-color:aqua;width 100%;box-sizing: border-box;}
box-sizing属性定义了如何计算元素的宽度和高度。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.