如何将2个SVG并排放置在容器中，并使容器的高度调整？

Question

我想在其容器中并排放置两个SVG：

HTML

<div id="container">
  <svg viewBox="100 185 275 655"></svg>
  <svg viewBox="100 185 275 655"></svg>
</div>
<br>
<div id="anotherdiv">Another div</div>

CSS

#container{width:100%;}
svg{width:50%;float:left;}

到目前为止，ID为anotherdiv的div将在容器启动的完全相同的位置生成。看来容器并不在乎这两个SVG所带来的高度。我该如何解决？谢谢！

Answer 1

您必须clear个浮动元素。示例：

#container {
  width: 100%;
}

svg {
  width: 50%;
  float: left;
}

#anotherdiv {
  background: red;
  clear: both;
}

<div id="container">
  <svg viewBox="100 185 275 655"></svg>
  <svg viewBox="100 185 275 655"></svg>
</div>
<br>
<div id="anotherdiv">Another div</div>