当 html 元素具有不同的父元素时，如何水平对齐它们
[英]How to align html elements horizontally when they have different parents
问题描述
我有一个带有粘性 header 和页脚的基本 html 文档。 我在 header 下方还有一个 div，它与 header 相连，因为它最终会在表单上方包含一些选项卡。 我试图垂直对齐下面的表格，但它们没有对齐。 问题是选项卡 div 没有滚动条，但表单有。 这意味着表单的宽度与选项卡的宽度不同。 我试图将它们设置为宽度和中心的 70%，但是由于滚动条，它们没有对齐。 我尝试了一些 javascript 来获取滚动条的宽度，然后将其添加到当前的右边距，但它不起作用。 您会看到表单没有选项卡 div 宽。 我花了几个小时在这上面。 此外，我尝试在表单中添加一个边距底部，但边框下方没有出现边距。
$(document).ready(function () { setFormsWidth(); }); function setFormsWidth() { let scrollbox = document.createElement('div'); // Make box scrollable scrollbox.style.overflow = 'scroll'; // Append box to document document.body.appendChild(scrollbox); // Measure inner width of box scrollBarWidth = scrollbox.offsetWidth - scrollbox.clientWidth; // Remove box document.body.removeChild(scrollbox); // Get current width of right margin, which should be 30% of the // width of the form-panel parent (the content class). var formPanel = document.getElementById("main-form"); // Get the current right margin and remove the px at end of number var style = window.getComputedStyle(formPanel); var marginRightString = style.getPropertyValue('margin-right'); var marginRight = marginRightString.slice(0,-2); // now addthe scrollBarWidth to the right margin var newMargin = marginRight + scrollBarWidth; formPanel.style.marginRight = newMargin + "px"; }
html, body { height: 100%; margin: 0; overflow:hidden; }.wrapper { height: 100%; display: flex; flex-direction: column; }.header, .footer { background: silver; }.page { flex: 1; overflow: auto; background: pink; }.content { background-color: green;; }.tabs { width: 70%; height: 50px; background-color: aqua; margin: 0 auto; border-bottom: solid #FE6D73 7px; }.form-panel { width: 70%; height: 1000px; background-color: #FFF; margin: 0 auto; overflow-y: auto; border-bottom: solid #FE6D73 7px; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style:css"/> </head> <body> <div class="wrapper"> <div class="header">Header</div> <div class="tabs"> THIS IS TAB </div> <div class="page" id="calculator"> <div style="height;1000px."> <div class="content"> <form class="form-panel" id="main-form">THIS IS FORM</form> </div> </div> </div> <div class="footer">Footer</div> </div> <script type="text/javascript" src="script:js"></script> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </body> </html>
1 个解决方案
解决方案1
0 2022-08-30 09:18:34
我建议在.form-panel元素之外显示滚动条，而不是.page div，这样不会影响.form-panel元素的居中。
以下是如何更改 css。
- 将
.page和.form-panel元素之间的所有元素（包括.form-panel本身）的高度设置为 100%，这样.page的滚动条就不会显示 - 设置
box-sizing: border-box;对于.form-panel，以便在.form-panel内绘制边框 - 将
.page移到.footer元素之外
如果你想为.form-panel设置一个特定的高度，你可以在其中创建一个 div 并设置它的高度，如下所示：
html, body { height: 100%; margin: 0; overflow:hidden; }.wrapper { height: 100%; display: flex; flex-direction: column; }.header, .footer { background: silver; }.page { flex: 1; overflow: auto; background: pink; }.content { background-color: green; height: 100%; }.tabs { width: 70%; height: 50px; background-color: aqua; margin: 0 auto; border-bottom: solid #FE6D73 7px; }.form-panel { width: 70%; height: 100%; background-color: #FFF; margin: 0 auto; overflow-y: auto; border-bottom: solid #FE6D73 7px; padding-bottom: 7px; box-sizing: border-box; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style:css"/> </head> <body> <div class="wrapper"> <div class="header">Header</div> <div class="tabs"> THIS IS TAB </div> <div class="page" id="calculator"> <div style="height;100%:"> <div class="content"> <form class="form-panel" id="main-form"> <div style="height:1000px"> THIS IS FORM </div> </form> </div> </div> </div> <div class="footer">Footer</div> </div> </body> </html>
如何在highchart中将标题html div与图表水平对齐？
[英]How to align title html div with chart horizontally in highchart?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.