极客观点
项目管理
HarmonyOS
在一个宽度设置为100%的div里设置一个居中的小div，小div宽度设为1000px。当缩小浏览器窗口,小div的宽会出问题被挤压了！怎么回事？所有详细的代码请看下面
相关代码
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/global.css"/>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
<title>yue</title>
</head>
<body>
<!-- 头部大div(包括三个中div:导航菜单中div,banner中div,产品与服务中div)包括两边的空白部分-->
<div class="header_nav_back">
<div class="header_nav">
<div class="logo_div">
<img src="img/logo.png" class="logo">
</div>
<div class="menu_div">
<div class="menu-tb-inner">
<div class="dv-tr color2">
产品与服务
<img src="img/arrowwhite.png" class="arrowwhite">
<img src="img/arrowblack.png" style="display: none;" class="arrowblack">
<ul class="menu">
<li>移动学习方案</li>
<li>混合学习方案</li>
<li>训练营</li>
</ul>
</div>
<div class="dv-tr color3">
客户案例
<img src="img/arrowwhite.png" class="arrowwhite">
<img src="img/arrowblack.png" style="display: none;" class="arrowblack">
<ul class="menu">
<li>工银亚洲</li>
<li>OPPO</li>
<li>中国五矿集团</li>
<li>延锋安道拓</li>
<li>更多案例</li>
</ul>
</div>
<div class="dv-tr color4">
活动资讯
<img src="img/arrowwhite.png" class="arrowwhite">
<img src="img/arrowblack.png" style="display: none;" class="arrowblack">
<ul class="menu">
<li>媒体报道</li>
<li>行业动态</li>
<li>直播回顾</li>
</ul>
</div>
<div class="dv-tr color5">
关于我们
<img src="img/arrowwhite.png" class="arrowwhite">
<img src="img/arrowblack.png" style="display: none;" class="arrowblack">
<ul class="menu">
<li>了解我们</li>
<li>顾问委员会</li>
<li>联系我们</li>
</ul>
</div>
<div class="dv-tr color6">
<!-- 菜单五
<img src="img/arrowwhite.png" class="arrowwhite">
<img src="img/arrowblack.png" style="display: none;" class="arrowblack">
<ul class="menu">
<li>菜单五-1</li>
<li>菜单五-2</li>
</ul> -->
</div>
</div>
</div>
</div>
</div>
<!-- 1000px不包括两边留白(包含导航菜单，banner，产品与服务三块) -->
<div class="">
<img src="img/banner6.png" >
</div>
<div class="">
<img src="img/content1.png" >
</div>
</body>
</html>// css代码
*{
margin: 0;
padding: 0;
/* list-style: none; */
}
body{
font-size: 14px;
/* min-width根据自己电脑的分辨率来 */
min-width: 1280px;
}
.header{
display: flex;
justify-content: center;
align-items: center;
/* background-image: url(../img/header_back.png); */
/* background-color: #152947; */
}
.header_out{
width: 1000px;
height: 1000px;
background-image: url(../img/header_back.png);
}
.header_nav_back{
/* width: 100%; */
/* height: 100px; */
background-color: #152947;
position: fixed;
left: 0px;
right: 0px;
top:0px;
z-index: 100;
display: flex;
justify-content: center;
align-items: center;
}
.header_nav{
width: 1000px;
height: 100px;
/* background-color: red; */
display: flex;
}
.logo_div{
/* width是400px */
width: 40%;
display: flex;
justify-content: center;
align-items: center;
background-color: red;
}
.logo_div img{
height: 50px;
width: 200px;
padding-left: 80px;
padding-top: 50px;
padding-bottom: 20px;
transform: scale(0.8);
}
.menu_div{
/* width是600px */
width: 60%;
color: white;
background-color: green;
background-image: url(../img/huochetou.png);
background-size: 600px 40px;
background-repeat: no-repeat;
background-position: bottom;
}
.menu-tb-inner{
width: 500px;
height: 40px;
/* background-color: green; */
margin-left: 100px;
margin-top: 60px;
display: flex;
flex-direction: row;
}
.dv-tr{
flex: 1;
height: 40px;
line-height: 40px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
/* width: 150px; */
/* height: 70px; */
position: relative;
}
.dv-tr:hover{
color:black;
}
.menu_div img{
width: 8px;
height: 4px;
}
.menu{
position: absolute;
top:39px;
background-color: #F5D966;
display: none;
}
/* 此处用并集选择器会影响到其他地方用了ul li的 */
.menu li{
list-style: none;
width:100px;
color:white;
margin-left: -3px;
}
.menu li:hover{
color:black;
}
// js代码
$(function(){
$(".dv-tr").mouseover (function(){
$(this).children('.menu').show();
$(this).children('.arrowwhite').css({'display':'none'});
$(this).children('.arrowblack').css({'display':'inline-block'});
});
$(".dv-tr").mouseout(function(){
$(this).children('.menu').hide();
$(this).children('.arrowwhite').css({'display':'inline-block'});
$(this).children('.arrowblack').css({'display':'none'});
});
})希望达到的结果
现在的问题是当缩小浏览器窗口, 红色div和绿色div包括绿色div里的那个小的黄色div的宽会被压缩！我想希望缩小浏览器窗口时几个div正常显示不会被挤压。
你这里全是使用flex布局，而flex中
flex-shrink默认为1，就是空间小时，按比例缩小。就是这个原因导致的，可以做以下修改1、取消header_nav_back的flex布局，header_nav设置
margin: 0 auto;，一样可以实现居中效果2、header_nav增加
flex-shrink: 0;