Question

在这里，我可能想做的事情太多了。我基本上只是想使我的布局约束可以延续到变化的窗口大小。不幸的是，布局无法保留，并且某些HTML标记在较小的屏幕上被切除。如何使布局在所有屏幕尺寸上保持一致？

作为参考，页面布局应如下所示：

 ----------------------------------------
|  [div 1]                               |
|                                        |
|                                        |
|                ----------              |
|                |   svg  |              |
|                ----------              |
|                                        |
|  [button1]                  [button2]  | 
-----------------------------------------

SVG具有边框，并使用viewBox允许SVG适当调整大小。但是，这是CSS和HTML问题，因为我的其他控件没有响应。

这可能很琐碎，但我认为viewBox可能会影响HTML标记。

这是我的HTML：

#radioToggle {
  position: fixed;
  margin-top: -20px;
  margin-bottom: 20px;
  background: white;
}

#buttonOneDiv {
  position: fixed;
  padding: 20px;
  bottom: 0;
}

#buttonTwoDiv {
  position: fixed;
  padding: 20px;
  bottom: 0;
  right: 0;
}

#container {}

#tree {
  text-align: center;
}

svg {
  border: solid 2px black;
  margin-top: 50px;
  margin-bottom: 100px;
}

<div id="radioToggle"></div>
<!-- this is div1 -->
<div id="container">
  <!-- container hosting the div that hosts the SVG-->
  <div id="tree"></div>
</div>
<div id="buttonOneDiv">
  <button type="button" class="btn btn-secondary">Back</button>
</div>
<div id="buttonTwoDiv">
  <button type="button" class="btn btn-secondary" id="collapse">Forward</button>
</div>

有关其他参考，这是我的SVG：

let svg = d3.select("#tree")
.append("svg")
.attr("viewBox", "0 0 " + (width + margin.left + margin.right) + " " 
+ (height + margin.top + margin.bottom))

如何使html标签响应布局大小调整？

0 个答案: