0

2 つの子 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 に答える