如何在子 div 之间划分父 div 的宽度（一个自动大小和一个固定）？

【问题标题】：How to divide width of parent div between child divs(one auto size and one fixed)?如何在子 div 之间划分父 div 的宽度（一个自动大小和一个固定）？
【发布时间】：2013-05-24 17:42:23
【问题描述】：

我有一个包含两个子 div 的 div。

<div id="parent">
    <div id="child1"></div>
    <div id="child2"></div>
</div>

现在的限制是

父 div 可以采用任意宽度
child1+child2 宽度等于父宽度
child1 应保持纵横比（宽/高）1.6
child2 将始终具有固定宽度，例如 100px，高度等于 child1
不使用 html5 和 css3

【问题讨论】：

您目前尝试过什么？看起来您是在抄写作业问题，而没有进行任何事先研究。
现在说真的。使用约束 3，您唯一的选择是使用 JS。没有纯 HTML+CSS 可以做到这一点。

标签： html css

【解决方案1】：

试试这个代码：
显然，这是无法使用纯 HTML+CSS 代码实现的。您将不得不获得 JS 代码的帮助。所以我已经通过 jQuery 实现了它。

#parent{
    width:500px;
    background:#000;
}
#child1{
    background:#ff0000;
    float:left;
}
#child2{
    background:#0000ff;
    float:left;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready( function(){
    $("#child1").width($("#parent").width()-100);
    $("#child2").width($("#parent").width()-$("#child1").width());
    $("#child1").height($("#child1").width()*6);
    $("#child2").height($("#child1").height());
    alert($("#child1").width());
    alert($("#child2").width());
    alert($("#child1").height());
    alert($("#child2").height());
});
</script>

<body>
<div id="parent">
    <div id="child1"></div>
    <div id="child2"></div>
</div>
</body>

【讨论】：