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