我＆＃39;一个开始涉足CSS的网络。
对于我的Django网络应用，我试图将<textarea>和<div>并排作为内联邻居。此外，我需要它们在屏幕尺寸上完全响应。
到目前为止我的代码是：
<textarea cols='40' rows='3' class='cxl' style='width:70%;float:left;height:70px;border-radius:10px;border: 1px #CFD8DC solid;background-color:#FAFAFA;'></textarea>
<div style='display:inline-block;float:left;background-color:lightgrey;width:25%;height:70px;border: 1px solid lightgrey;text-align:center;font-weight:bold;border-radius:10px;color:white;'>IM A DIV</div>
以上内容包含在div中：
<div style="max-width:600px;width:95%;">
</div>
目前，他们已成功排队。但是，如果我为div width:70%和<textarea>保留width:30%，则对齐将丢失。接下来，我将后者减少到width:29%。这些元素排成一列，但是较小的屏幕尺寸会立即将其分解。即反应非常弱。
如果我逐点降低width，我会对降低屏幕尺寸有更大的容忍度。最终，如果我选择width:70%和width:25%，则元素的排列尺寸与我的要求一样小。
为什么它不能与width:70%和width:30%一起使用？我能做些什么来确保他们这样工作？
答案 0 :(得分：2)
边框会增加div的有效宽度，因此两个元素的总有效宽度加起来超过100％。
您可以将div的box-sizing属性设置为border-box。这样，它将包括30％的边界，一切都应按预期工作。