时间戳

首页 > 解决方案 > 元素宽度以匹配其他元素的水平位置

javascript - 元素宽度以匹配其他元素的水平位置

问题描述

假设我们有一个包含元素的导航 div。在导航 div 下方，有一些栏必须扩展到与导航元素之一匹配的宽度（在本例中为第三个）。

<div id="main_navigator">
        <div id="main_navigator_upper">          
            <a id="main_navigator_logo" src="/"></a>
            <ul id="main_navigator_r1">
                <li>
                    <a class="main_nav_btn">BTN 1</a>
                </li>
                <li>
                    <a class="main_nav_btn">BTN 2</a>
                </li>
                <li>
                    <a class="main_nav_btn">BTN 3</a>
                </li>
                <li>
                    <a class="main_nav_btn">BTN 4</a>
                </li>
                <li id="main_navigator_l1">
                    <div id="main_navigator_s1"></div>
                </li>
        <li>
          <ul id="main_navigator_regbox">
            <li>
              <p id="regbox_signin">sign in</p>
            </li>
            <li>
              <div id="main_navigator_regbox_s1"></div>
            </li>
            <li>
              <a id="regbox_signup" href="sign_up">sign up</a>
            </li>
          </ul>
                  </li>
            </ul>
        </div>
        <div id="main_navigator_bottom">
            <div id="main_navigator_progression"></div>
              </div>
    </div>

从这段代码中，main_navigator_progressiondiv 必须扩展它的宽度以匹配BTN 3.

你可以在这里看到这个概念。

我编写了一个简单的 JS 代码，但它似乎并不整洁，并且并不总是有效：

function initializeProgressorPos() {
    document.getElementById("main_navigator_progression").setAttribute("style", ("width: " + (document.getElementsByClassName("main_nav_btn")[2].getBoundingClientRect().x - document.getElementsByClassName("main_nav_btn")[2].getBoundingClientRect().width) + "px"))
}
initializeProgressorPos();
$(window).resize(function() {
    initializeProgressorPos();
});

有没有办法创建这样一个即使在浏览器缩放时也能工作的功能？我的代码可能有什么问题？有没有可能用纯CSS来完成？

标签： javascripthtmlcss

解决方案

当您将元素浮动到右侧时，首先您必须获取文档的宽度，然后从该数量中排除从文档左侧到元素右侧的宽度：

function initializeProgressorPos() {
     var elementRight=$(document).width()- $('.main_nav_btn:eq(2)').offset().left - $('.main_nav_btn:eq(2)').width();
    $("#main_navigator_progression").css({"width": elementRight + "px"});
}
    initializeProgressorPos();

$(window).resize(function() {
    initializeProgressorPos();
});
body {
	margin: 0;
	overflow-y: scroll;
}

#main_navigator {
	position: fixed;
	background-color: black;
	width: 100%;
}
#main_navigator_upper {
	position: relative;
	display: flex;
	flex-direction: row;
}
#main_navigator_logo {
	width: 416px;
	height: 120px;
	background-color: white;
}
#main_navigator_r1 {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-grow: 1;
	flex-shrink: 1;
	padding: 0;
	padding-right: 5%;
	text-align: center;
	margin-top: 0px;
	height: 98px;
	list-style-type: none;
}
#main_navigator_r1 li {
	flex-grow: 1;
	flex-shrink: 1;
	/* flex-basis: 0; */
  flex-basis: auto; /* new */
}
#main_navigator_l1 {
	flex-grow: 0.1 !important;
}
#main_navigator_r1 li .main_nav_btn {
	color: white;
	display: block;
	height: 100%;
	font-family: "nexa_bold";
	font-size: 0.9em;
	text-decoration: none;
}
#main_navigator_s1 {
	display: inline-block;
	width: 2px;
	height: 35px;
	background-color: #B28039;
}
#main_navigator_regbox {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
#main_navigator_regbox li {
	display: inline-block;
	flex-grow: 0.1;
	flex-shrink: 0.1;
}
#regbox_signin {
	display: block;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
	color: #B28039;
	font-size: 0.9em;
	font-family: "nexa_light";
}
#regbox_signup {
	display: block;
	white-space: nowrap;
	text-decoration: none;
	color: white;
	font-size: 0.9em;
	font-family: "nexa_light";
}
#main_navigator_regbox_s1 {
	display: inline-block;
	width: 1.4px;
	height: 13.5px;
	background-color: white;
}
#main_navigator_bottom {
	background-color: black;
	height: 24px;
}
#main_navigator_progression {
	position: relative;
	background-color: #B28039;
	height: 100%;
	width: 416px;
	float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
    <html lang="en">
    	<body>
    		<div id="main_navigator">
                <div id="main_navigator_upper">          
                    <a id="main_navigator_logo" src="/"></a>
                    <ul id="main_navigator_r1">
                        <li>
                            <a class="main_nav_btn">BTN 1</a>
                        </li>
                        <li>
                            <a class="main_nav_btn">BTN 2</a>
                        </li>
                        <li>
                            <a class="main_nav_btn">BTN 3</a>
                        </li>
                        <li>
                            <a class="main_nav_btn">BTN 4</a>
                        </li>
                        <li id="main_navigator_l1">
                            <div id="main_navigator_s1"></div>
                        </li>
                <li>
                  <ul id="main_navigator_regbox">
                    <li>
                      <p id="regbox_signin">sign in</p>
                    </li>
                    <li>
                      <div id="main_navigator_regbox_s1"></div>
                    </li>
                    <li>
                      <a id="regbox_signup" href="sign_up">sign up</a>
                    </li>
                  </ul>
                          </li>
                    </ul>
                </div>
                <div id="main_navigator_bottom">
                    <div id="main_navigator_progression"></div>
			          </div>
            </div>
    	</body>
    </html>

推荐阅读