1

大家好，我正在研究 html 和 javascript。我要问一个非常基本的问题。我写了一个简单的代码尝试了不同的东西。但无法让它发挥作用。我想要做的是我有一个具有两个内部 div 的 div。两个内部 div 内部都有一个等于 div 大小的 svg 元素。我希望两个内部 div 并排。但我的 div 不相等Ist div 大，第二个宽度小。

<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 写高度和宽度，还是只用一个就可以了

4

2 回答 2

2

如果您希望 的divs宽度相等，则需要将它们的width值设置为相等。有两种方法可以做到这一点。首先，您可以手动设置宽度：

<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

You can add float inside svg tag

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

Read more here

于 2013-03-12T15:42:41.613 回答