Question

我将两个单独的div（circle_bg_l和circle_bg_r）的宽度设置为7vh，但其中一个看起来更大。这是代码：

＆＃13;

    @charset "utf-8";
/* CSS Document */

body {
margin-top: 0;
margin-left: 0;
margin-right: 0;
background-image: url(html-bg2.png);
background-size: 0.5%;
background-repeat: repeat;
background-color: #111111;
overflow: auto;
}

#headbar_left {
position: fixed;
left: 0;
margin: 0;
width: 51vw;
height: 10vh;
background-color: #161616;
border-bottom: 1vh solid #8704ff;
transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transform-origin: 100% -50%;
-o-transform-origin: 100% -50%;
-moz-transform-origin: 100% -50%;
-webkit-transform-origin: 100% -50%;
-ms-transform-origin: 100% -50%;
}

#headbar_right {
position: fixed;
right: 0;
margin: 0;
width: 51vw;
height: 10vh;
background-color: #161616;
border-bottom: 1vh solid #8704ff;
transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-webkit-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
}

#circle_bg_l {
position: fixed;
z-index: 0;
width: 7vh;
height: 10vh;
left: calc(50vw - 7vh);
transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
background-color: Transparent;
box-sizing: border-box;
-o-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
}

#circle_bg_r {
position: fixed;
z-index: 0;
width: 7vh;
height: 10vh;
right: calc(50vw - 7vh);
transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
background-color: Transparent;
box-sizing: border-box;
-o-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
}

.show {
background-color: #8704ff !important;
}

#circle_logo {
position: fixed;
z-index: 1;
width: 14vh;
height: 14vh;
border-radius: 7vh;
background-color: #161616;
left: calc(50vw - 7vh);
box-sizing: border-box;
-o-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
border: 1vh solid #8704ff;
text-align: center;
line-height: 14vh;
transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
background-image: url(html-logo.png);
background-size: 100%;
}

.l_menu {
height: 10vh;
z-index: 2;
line-height: 10vh;
vertical-align: center;
text-align: center;
color: white;
font-family: "Impact";
font-size: 2.5vh;
transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
width: calc((50vw - 7vh) / 3);
float: left;
}

.l_menu:hover {
color: #161616;
background-color: #8704ff;
}

.r_menu {
height: 10vh;
z-index: 2;
line-height: 10vh;
vertical-align: center;
text-align: center;
color: white;
font-family: "Impact";
font-size: 2.5vh;
transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
width: calc((50vw - 7vh) / 3);
float: right;
}

.r_menu:hover {
color: #161616;
background-color: #8704ff;
}

.spin {
transform: rotate(360deg);
-o-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}

.collapse {
transform: scaleX(0);
-o-transform: scaleX(0);
-moz-transform: scaleX(0);
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
}

.move_left {
transform: translateX(calc(7vh - 50vw));
-o-transform: translateX(calc(7vh - 50vw));
-moz-transform: translateX(calc(7vh - 50vw));
-webkit-transform: translateX(calc(7vh - 50vw));
-ms-transform: translateX(calc(7vh - 50vw));

}

.move_fast {
transition: all 0.2s ease-in-out !important;
-o-transition: all 0.2s ease-in-out !important;
-moz-transition: all 0.2s ease-in-out !important;
-webkit-transition: all 0.2s ease-in-out !important;
-ms-transition: all 0.2s ease-in-out !important;
}

#circle_logo:hover {
transition: all 0.15s ease-in-out !important;
-o-transition: all 0.15s ease-in-out !important;
-moz-transition: all 0.15s ease-in-out !important;
-webkit-transition: all 0.15s ease-in-out !important;
-ms-transition: all 0.15s ease-in-out !important;
border-radius: 0;
}

#body_content {
position: absolute;
width: calc(100vw - 28vh);
height: 105vh;
margin-right: 14vh;
margin-left: 14vh;
background-color: #161616;
z-index: -1;
box-shadow: 0 3vh 10vh 4vh black;
color: white;
font-family: "Impact";
font-size: 10vh;
padding-top: 21vh;
}

#t_s {
font-size: 2vh;
}

＆＃13;

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="uh.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>uh</title>
</head>
<body>
<div id="top"></div>
<div id="headbar_left">
<div class="l_menu">FIRST</div>
<div class="l_menu">SECOND</div>
<div id="l_mid" class="l_menu">THIRD</div>
</div>
<div id="headbar_right">
<div class="r_menu">SIXTH</div>
<div class="r_menu">FIFTH</div>
<div id="r_mid" class="r_menu">FOURTH</div>
</div>
<div id="circle_bg_l"></div><a href="uh.html"><div id="circle_logo"></div></a><div id="circle_bg_r"></div>
<div id="body_content"><center>WHAT IS THIS PAGE?<p id="t_s">no one knows</center></div>
</body>
<script>
var a = 1;

function remove() {
	if (a === 0) {
		$("#circle_logo").removeClass('move_left');
		setTimeout(function() {
			$("#circle_logo").removeClass('move_fast');
			$("#circle_logo").removeClass('spin');
        	$("#headbar_left, #headbar_right").removeClass('collapse');
        	$("#circle_logo").css("background-image", "url(html-logo.png)");
        	$("a").attr("href", "uh.html");
        }, 300);
        a = 1;
    }
}

function add() {
	if (a === 1) {
		$("#circle_logo").addClass('spin');
    	$("#headbar_left, #headbar_right").addClass('collapse');
    	setTimeout(function() {
    		$("#circle_logo").addClass('move_left');
    		$("#circle_logo").addClass('move_fast');
        	$("#circle_logo").css("background-image", "url(up-arrow.png)");
        	$("a").attr("href", "#top");
    	}, 400);
    	a = 0;
    }
}

$(document).scroll(function() {
    if($(window).scrollTop() > 0) {
        add();
    }
    else {
        remove();
    }
});

$("#l_mid").mouseover(function() {
$("#circle_bg_l").addClass("show");
});

$("#l_mid").mouseout(function() {
$("#circle_bg_l").removeClass("show");
});

$("#r_mid").mouseover(function() {
$("#circle_bg_r").addClass("show");
});

$("#r_mid").mouseout(function() {
$("#circle_bg_r").removeClass("show");
});
</script>
</html>

＆＃13;

我还注意到，在运行代码片段后，div在浏览器中打开网页时的排列方式与排队方式不同。知道如何解决这些问题吗？谢谢！

Answer 1

它们与firefox，chrome和safari（OS X上的最新版本）大小相同 - 根据您发布的代码段。它们在我眼中看起来也是一样的。

也就是说，您的浏览器或设备可能会显示出一些差异，一种可能是您使用大众。你有2个标题部分，每个标题部分使用51VW彼此相邻。这大致相当于有2个部分使用51％的宽度，而不是加到100vw。我会尝试将每个更改为50VW并再次测试。

具有相同宽度的Div具有不同的宽度

1 个答案: