0

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

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

现在的限制是

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

1 回答 1

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>
于 2013-05-29T15:20:14.487 回答