Html 如何在子div（一个自动大小和一个固定大小）之间划分父div的宽度？
我有一个包含两个子div的divHtml 如何在子div（一个自动大小和一个固定大小）之间划分父div的宽度？,html,css,Html,Css,我有一个包含两个子div的div <div id="parent"> <div id="child1"></div> <div id="child2"></div> </div> 现在的限制是 父div可以采用任何宽度 child1+child2宽度等于父项的宽度 儿童1应保持高宽比（宽/高）1.6 child2将始终具有固定的宽度，例如100px，高度等于child1 不使用html5和css3 尝试
<div id="parent">
<div id="child1"></div>
<div id="child2"></div>
</div>
尝试以下代码：
显然，这是无法使用纯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>
#父级{
宽度：500px；
背景：#000；
}
#孩子1{
背景：#ff0000；
浮动：左；
}
#孩子2{
背景：#0000ff；
浮动：左；
}
$（文档）.ready（函数（）{
$（“#child1”）.width（$（“#parent”）.width（）-100）；
$（“#child2”）.width（$（“#parent”）.width（）-$（“#child1”）.width（））；
$（“#child1”）。高度（$（“#child1”）。宽度（）*6）；
$（“#child2”）.height（$（“#child1”）.height（））；
警报（$（“#child1”）.width（）；
警报（$（“#child2”）.width（）；
警报（$（“#child1”）.height（）；
警报（$（“#child2”）.height（）；
});