根據另一個元素擬合一個元素

Question

我正在嘗試在標題標題周圍放置兩個div，但似乎無法正常工作。 我不確定calc（）是否可以與javascript配合良好。 這是到目前為止的代碼：

 document.getElementByClass('Header').clientWidth;

 :root { --main-accent-color: #3500D3; --main-bg-color: #282828; --secondary-bg-color: #0c0032; --main-content-bg-color: #190061; --text-color: #ffffff; --alt-color: #240090; } * { box-sizing: content-box; margin: 0; } body { background-color: var(--main-bg-color); } h1 { font-family: robot0, sans-serif; font-size: 70px; font-weight: 100; font-variant: petite-caps; color: var(--text-color); } .header { background-color: var(--main-bg-color); width: 100%; height: 100px; top: 0; margin: 0; position: fixed; text-align: center; z-index: 10; border-bottom: 5px solid var(--main-accent-color); } .header-title { box-sizing: content-box; background-color: var(--main-bg-color); height: 85px; width: 500px; margin: auto; vertical-align: middle; padding-top: 50px; padding-top: 20px; border-left: 5px solid var(--main-accent-color); border-right: 5px solid var(--main-accent-color); z-index: 11 } .header-info { width: calc((clientWidth - 500) / 2); height: 100px; display: inline-block; position: absolute; margin: 0; padding: 0; } #right-info { right: calc(((clientWidth - 500) / 2) + 500); } #left-info { right: 0; }

 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <title>Webpage</title> <script> document.getElementByClass('header').clientWidth; </script> </head> <body> <!--Header--> <div class="header"> <div class="header-title"> <h1>Welcome</h1> </div> <div class="header-info" id="left-info"> <p> Hi </p> </div> <div class="header-info" id="right-info"> <p> Hi </p> </div> </div> </body> </html>

如果我可以使用其他方法，那就太好了。 另外，我現在正在學習CSS，所以我對JavaScript完全沒有信心，我只使用了它，因為其他人是這樣做的。

Answer 1

我認為您使它變得太復雜了。 我刪除了很多代碼，並為標題添加了flexbox 。 側面的兩個div都可以在空間允許的范圍內增長。

 :root { --main-accent-color: #3500D3; --main-bg-color: #282828; --secondary-bg-color: #0c0032; --main-content-bg-color: #190061; --text-color: #ffffff; --alt-color: #240090; } * { box-sizing: content-box; margin: 0; } body { background-color: var(--main-bg-color); } h1 { font-family: robot0, sans-serif; font-size: 70px; font-weight: 100; font-variant: petite-caps; color: var(--text-color); } .header { width: 100%; height: 100px; top: 0; position: fixed; border-bottom: 5px solid var(--main-accent-color); display: flex; align-items: center; /* Vertical alignment */ } .header-title { width: 500px; border-left: 5px solid var(--main-accent-color); border-right: 5px solid var(--main-accent-color); text-align: center; } .header-info { flex-grow: 1; }

 <div class="header"> <div class="header-info"> <p> Hi </p> </div> <div class="header-title"> <h1>Welcome</h1> </div> <div class="header-info"> <p> Hi </p> </div> </div>

根據另一個元素擬合一個元素

問題描述

1 個解決方案

解決方案1
1 已采納 2018-10-28 17:32:20

根據另一個元素擬合一個元素

問題描述

1 個解決方案

解決方案1 1 已采納 2018-10-28 17:32:20

解決方案1
1 已采納 2018-10-28 17:32:20