gpt4 book ai didi

jquery - 将比视口(viewport)宽的 DIV 居中

转载 作者:太空宇宙 更新时间:2023-11-04 13:06:59 25 4
gpt4 key购买 nike

<分区>

我正在创建一个页面来显示祖先的家谱。
该页面是动态创建的,所以我无法知道会有多少代或内容是什么。
然而,此处显示了一个相当简单的示例:http://myrootsmap.com/so_tree2.php .

就目前而言,它非常简单,因为它适合任何普通的浏览器窗口(我暂时不支持移动设备)。
然而,随着每一代的增加,树的宽度都会加倍,因此当表格对于视口(viewport)来说太大时,我需要进行良好的展示。
如果您缩小浏览器窗口的大小,您将看到:

  1. 树在需要时有自己的水平滚动条(好)
  2. 树总是左对齐(不好)
  3. 如果树对于视口(viewport)来说太高,则垂直滚动条在窗口上而不是树上(同样不好)

总而言之,我的 HTML 如下所示:

<div id="container">
<?php include( "includes/header_index.php"); ?>

<div id="wholetree">
<form action="<?php echo $_SERVER['PHP_SELF']?>" method="post" name="add_gen">
<input type="hidden" name="MM_insert" value="add_gen">
<a href="javascript:void()" onclick="document.add_gen.submit()" class="tree_button">Add Another Generation</a>
</form>
<form action="map.php" method="get" name="view_map">
<input type="hidden" name="origin" value="<?php echo $origin_id ?>">
<a href="javascript:void()" onclick="document.view_map.submit()" class="tree_button view_button">View the Map</a>
</form>
<div class="tree">
<?php include($tree); ?>
</div>
</div>
</div>

和 CSS

* {
margin: 0;
padding: 0;
}
#container {
display: flex;
min-height: 100%;
flex-direction: column;
}
#wholetree {
position: relative;
top: 120px
}
.tree {
overflow: auto;
padding: 10px
}
.tree ul {
padding: 0 0 20px;
position: relative;
}
.tree li {
display: inline-block;
white-space: nowrap;
vertical-align: bottom;
margin: 0 -2px 0 -2px;
text-align: center;
list-style-type: none;
position: relative;
padding: 0 5px 20px 5px;
}

问题:

  • 如何让 div class=tree 位于 div id=wholetree 的中心?
  • 如果 div class=tree 溢出,如何滚动到底部?和
  • 如何在其上设置垂直滚动条?

我只喜欢 CSS,但如果这是唯一的方式,我会使用 jQuery。

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com