CSS设置div百分比宽度未按父容器生效问题排查

你的代码存在5类写法/逻辑错误，直接导致百分比宽度规则完全失效：

• CSS属性值非法：所有宽度、边距属性的值额外包裹了双引号（例如width:"10%"），CSS语法中属性值不需要加引号，这类写法会被浏览器直接判定为无效规则，对应样式完全不生效，因此div才会按内部内容自适应尺寸。
• CSS注释语法错误：<style>标签内部只能使用CSS标准注释/* 注释内容 */，你写的<!-- xxx -->是HTML注释语法，会干扰CSS解析器，导致后续样式规则加载异常。
• 布局计算逻辑错误：你给浮动子元素同时叠加了百分比margin-left，四个子元素的宽度+margin总和达到200%，就算宽度规则生效，元素也会因为总宽度超出父容器被挤换行，无法实现并排占满整宽的效果。
• 父容器属性冲突：.iwrapper设置display: inline-block会触发元素按内容收缩宽度的特性，和你设置的width:100%存在布局逻辑冲突；另外form标签上写的width="100%"是HTML废弃属性，无法控制表单宽度。
• DOM结构不完整：iremove区块内的<i>图标标签没有写对应的闭合标签</i>，会导致浏览器解析DOM结构时出现错乱，影响布局渲染。

修正思路：清除所有无效语法，四个并排子div直接按10%/30%/10%/50%的比例分配宽度，总宽度刚好100%，移除多余的margin偏移，给父容器加浮动清除避免高度塌陷：

<style>
/* 全局重置，避免浏览器默认边距、盒模型规则影响宽度计算 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
    width: 100%;
}
.basic{}
.xinfo {
  color: #6495ed; 
}
/* 表单宽度用CSS控制，替代废弃的HTML width属性 */
#frmContent {
  width: 100%;
}
/* 父容器清除浮动，移除会触发宽度收缩的inline-block属性 */
.iwrapper{
  width:100%;
  overflow:auto;
}
/* 四个子元素按比例分配宽度，全部左浮动，移除多余margin偏移 */
.iInfo{
  width:10%;
  position:relative;
  float:left;
  padding: 0 5px; /* 可选：加内边距避免图标贴边 */
}
.ibox{
  width:30%;
  position:relative;
  float:left;
  overflow:auto;
}
.ibox input {
  width: 100%; /* 让输入框撑满对应容器宽度 */
}
.iremove{
  width:10%;
  float:left;
  padding: 0 5px; /* 可选：加内边距避免删除图标贴边 */
}
.itip{
  width:50%;
  float:left;
  overflow:auto;
  color: #666; /* 可选：调整提示文字颜色 */
}
</style>

</head>
<body>

<form id="frmContent">
<div id="iwrapper" class="iwrapper">
<div id="iInfo" class="iInfo"><i class="fa fa-info-circle xinfo" aria-hidden="true"></i></div>
<div id="ibox" class="ibox"><input type="text" id="content1" name="content1"></div>
<!-- 补全之前缺失的i标签闭合 -->
<div id="iremove" class="iremove"><i class="fa fa-times xremove" aria-hidden="true"></i></div>  
<div id = "itip" class="itip">Example: blah blah</div>
</div>
</form>
</body>

注：代码中新增的box-sizing: border-box规则是为了让内边距、边框不会撑大元素设置的百分比宽度，避免总宽度超出100%导致换行，可根据实际需求调整内边距数值。

内容的提问来源于stack exchange，提问作者A.Dim