Question

我有一个包含两个子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

Answer 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>

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

1 个答案: