Question

大家好我正在研究html和javascript.And我将问一个非常基本的问题。我写了一个简单的代码尝试了不同的东西。但是无法让它工作我的坏。我想要做的是我有一个div有两个内部div。两个内部div有一个svg元素，里面等于div的大小。我希望两个内部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写高度和宽度，或者只使用一个

Answer 1

如果您希望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很简单。

Answer 2

您可以在svg标签

中添加浮点数

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

如何在一个更大的div中并排制作两个插入svg元素

2 个答案: