1

こんにちは、私はhtmlとjavascriptに取り組んでいます。そして、非常に基本的な質問をします。簡単なコードを書いて別のことを試しましたが、うまく機能させることができませんでした。私がやりたいのは、2つの内部divを持つdivがあり、両方の内部divの内部にdivのサイズに等しいsvg要素があり、両方の内部divを並べて配置したいのですが、私のdivは等しくありませんIst divは大きく、secondは幅が小さいです。

<html>
<head></head>
<body>
 <div position:relative; width = "100%"; height = "400px" float:left>
  <div width = "1000px" height = "400px"; float:left>
    <svg width = "1000px" height = "400px"> 
    </svg>
  </div >
  <div width = "300px" height = "400px"float:left>
    <svg width = "300px" height = "400px"> 
    </svg>
  </div>
 </div>
</body>
</html>

どうすればこれを達成できますか。 また、divとsvgの両方で高さと幅を書く必要がありますか、それとも1つだけで使用しても問題ありません

4

2 に答える 2

2

divsの幅を等しくしたい場合は、それらのwidth値を等しく設定する必要があります。これを行うには2つの方法があります。まず、幅を手動で設定できます。

<html>
<head></head>
<body>
 <div position:relative; width = "100%" height = "400px">
  <div width = "1000px" height = "400px" style="float:left">
    <svg width = "1000px" height = "400px"> 
    </svg>
  </div >
  <div width = "1000px" height = "400px" style="float:right">
    <svg width = "1000px" height = "400px"> 
    </svg>
  </div>
 </div>
</body>
</html>

または、パーセンテージを使用することもできます。

<html>
<head></head>
<body>
 <div position:relative; width = "100%"; height = "400px">
  <div width = "50%" height = "400px" style="float:left">
    <svg width = "100%" height = "400px"> 
    </svg>
  </div >
  <div width = "50%" height = "400px" style="float:right">
    <svg width = "100%" height = "400px"> 
    </svg>
  </div>
 </div>
</body>
</html>

どちらの場合も、divを並べて表示する場合は、一方を並べて、もう一方を並べる必要がfloat:rightありfloat:leftます。これを達成する他の方法がありますがfloats、簡単です。

于 2012-07-04T17:24:42.940 に答える
0

svgタグ内にfloatを追加できます

<html>
<head></head>
<body>
 <div>
  <div>
    <svg width = "1000px" height = "400px" style="float:right"> 
    </svg>
  </div >
  <div>
    <svg width = "300px" height = "400px" style="float:right"> 
    </svg>
  </div>
 </div>
</body>
</html>

詳細はこちら

于 2013-03-12T15:42:41.613 に答える