为什么此代码不会设置两个<input>
元素&#39;宽度为其父级的20%,即#right
的20%,它本身应该只是菜单的右侧部分(而不是浏览器的完整宽度)?
* { margin:0; padding: 0; }
#menu { background-color: yellow; }
#left {background-color: green; float: left; width: 200px; }
#mid { background-color: red; float: left; width: 40%; }
#right {background-color: blue; width: calc(100%-40%-200px);}
#a1, #a2 { width: 20%; }
&#13;
<div id="menu">
<div id="left">left green: 200px</div>
<div id="mid">mid red: 40% of browser width</div>
<div id="right">
<input id="a1" />
<input id="a2" />
</div>
</div>
<div>
content of the site
</div>
&#13;
注意:#right似乎使用完整的浏览器宽度,而宽度应为100% - 40% - 200px。然后20%将是12%-40px,即我可以设置#a1, #a2 { width: calc(12%-40px); }
。但这将是一个肮脏的黑客。我真的想根据父宽度设置#a1和#a2&#39的宽度。
答案 0 :(得分:3)
我在检查员处查看了正在运行的代码,并注意到了这一点:
您需要在每个calc
函数值之间使用空格。
calc(100% - 40% - 200px)
<强>更新强>
您发现换行的原因是您需要将#right
浮动到左侧。
#right {
...
float: left;
}
添加一条规则可以为我们提供您期望的内容。
如果您发现文字输入之间有一点差距(未图示),请删除HTML中输入所在的空白区域。
制作本:
<input id="a1" />
<input id="a2" />
进入这个:
<input id="a1" /><input id="a2" />
* { margin:0; padding: 0; }
#menu { background-color: yellow; }
#left {background-color: green; float: left; width: 200px; }
#mid { background-color: red; float: left; width: 40%; }
#right { background-color: blue; width: calc(100% - 40% - 200px); float: left; }
#a1, #a2 { width: 20%; }
&#13;
<div id="menu">
<div id="left">left green: 200px</div>
<div id="mid">mid red: 40% of browser width</div>
<div id="right">
<input id="a1" /><input id="a2" />
</div>
</div>
<div>
content of the site
</div>
&#13;