为什么不会瓜分剩余宽度？
来源：3-2 项目作业
陈立天
2020-09-17 20:59:11
代码在下方：
另外经过我的对比测试是发现给.right-content .menu-item 的img 设置了宽度以后 right-content 就能正常瓜分剩余空间了。这个剩余空间和子元素里的图片有关系的吗？
menu.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,maximum-scale=1.0,minimum-scale=1">
<title>订单</title>
<script src="../lib/jquery.js"></script>
<!-- 适配方案 -->
<script type="text/javascript">
(function($) {
'use strict'
var docEl = document.documentElement;
// 解决dpr一边框像素问题
var dpr = window.devicePixelRatio || 1,
viewPortEl = document.querySelector('meta[name="viewport"]'),
maxWidth = 540,
minWidth = 320;
dpr = dpr >= 3 ? 3:(dpr >= 2 ? 2 :1);
docEl.setAttribute('data-dpr',dpr);
docEl.setAttribute('max-width', maxWidth);
docEl.setAttribute('min-width', minWidth);
var scale = 1/ dpr,
content = 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' +scale+',user-scalable=no';
if(viewPortEl){
viewPortEl.setAttribute('content',content);
}else{
viewPortEl = createElement('meta');
viewPortEl.setAttribute('name','viewport');
viewPortEl.setAttribute('content',content);
document.head.appendChild(viewPortEl);
}
// 设置Rem的单位
function setRemUnit(){
// 获取rem基准值
var viewWidth = docEl.clientWidth;
if(viewWidth && (viewWidth / dpr > maxWidth)) {
viewWidth = maxWidth * dpr;
}else if(viewWidth && (viewWidth / dpr < minWidth)){
viewWidth = minWidth * dpr;
}
var rem =viewWidth / 10;
docEl.style.fontSize= rem + 'px';
}
setRemUnit();
// 页面发生变化执行setRemUnit方法计算html根元素的font-size
window.addEventListener('resize',setRemUnit);
window.addEventListener('pageshow',setRemUnit);
})(jQuery);
</script>
<link rel="stylesheet" href="../lib/base.css">
<link rel="stylesheet" href="../commom/navHeader/navaHeader.css">
<link rel="stylesheet" href="../commom/headerTab/headerTab.css">
<link rel="stylesheet" href="./left/left.css">
<link rel="stylesheet" href="./right/right.css">
</head>
<body>
<div class="nav">
<div class="back-icon"></div>
<h4 class="title">深圳麦当劳前海二餐厅</h4>
</div>
<div class="tab-bar">
<!-- js-loading--tab-item -->
</div>
<div class="menu-inner">
<div class="left-bar">
<div class="left-bar-inner"></div>
</div>
<div class="right-content">
<div class="right-title"></div>
<div class="right-list">
<div class="right-list-inner"></div>
</div>
</div>
<!-- <div class="shop-bar">
<div class="choose-content"></div>
<div class="bottom-content"></div>
</div>
<div class="mask hide"></div> -->
</div>
<script src="./left/left.js"></script>
<script src="../commom/headerTab/headerTab.js"></script>
<script src="../menu/right/right.js"></script>
</body>
</html>left.js
(function($) {
'use strict'
var itemTmpl = '<div class="left-item">'+
'<div class="itent-text">'+
'$getItemContent'+
'</div>'
'</div>'
function getList(){
$.get('../json/food.json',function(data){
console.log('foodData',data);
window.food_spu_tags = data.data.food_spu_tags || [];
initContentList(window.food_spu_tags);
})
}
function getItemContent(data){
if(data.icon){
return '<img class="item-icon" src='+data.icon+' />'+data.name;
}else{
return data.name;
}
}
function initContentList(list){
list.forEach(function(item,index){
var str = itemTmpl.replace('$getItemContent',getItemContent(item));
// 挂载data数据到dom上
var $target = $(str)
$target.data('itemData',item);
console.log('$targetData:', $target.data('itemData'));
$('.left-bar-inner').append($target);
})
$('.left-item').first().click();
}
function addClick(){
$('.menu-inner').on('click','.left-item',function(e){
var $target = $(e.currentTarget);
$target.addClass('active');
$target.siblings().removeClass('active');
window.Right.refresh($target.data('itemData'));
});
}
(function init(){
getList();
addClick();
})()
})(jQuery);right.js
(function($) {
'use strict'
var itemTmpl = '<div class="menu-item">'+
'<img class="img" src=$picture />'+
'<div class="menu-item-right">'+
'<p class="item-title">$name</p>'+
'<p class="item-desc">$description</p>'+
'<p class="item-zan">$praise_content</p>'+
'<p class="item-price">¥$min_price<span class="unit">/$unit</span></p>'+
'</div>'+
'<div class="select-content">'+
'<div class="minus"></div>'+
'<div class="count">$chooseCount</div>'+
'<div class="plus"></div>'+
'</div>'+
'</div>'
function initRightTitle(str){
$('.right-title').text(str);
}
function initRightList(list){
console.log('list:',list);
$('.right-list-inner').html();
list.forEach(function(item,index){
if(!item.chooseCount){
item.chooseCount = 0;
}
var str = itemTmpl.
replace('$picture',item.picture).
replace('$name',item.name).
replace('$description',item.$description).
replace('$praise_content',item.praise_content).
replace('$min_price',item.min_price).
replace('$unit',item.unit).
replace('$chooseCount',item.chooseCount);
var $target = $(str);
$target.data('itemdata',item);
$('.right-list-inner').append($target)
})
}
function init(data){
console.log('rightData:',data);
initRightList(data.spus || []);
initRightTitle(data.name || []);
}
window.Right = {
refresh:init
}
})(jQuery);left.css
.left-bar{
height: 100%;
width: 2.266667rem;
background-color: #efefef;
overflow: auto;
}
.left-bar .left-bar-inner{
padding-bottom: 2.266667rem;
}
.left-bar .left-item{
font-size: 0.373333rem;
color: #656565;
text-align: center;
border-bottom: 1px solid #bfbfbf;
display: flex;
height: 1.6rem;
justify-content: center;
align-items: center;
}
.itent-text{
/* align-self: center; */
}
.left-bar .item-icon{
width: 0.533333rem;
height: 0.533333rem;
display: inline-block;
margin-right: 0.16rem;
vertical-align: -0.12rem;
}
.menu-inner{
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
top: 2.933333rem;
overflow: hidden;
}right.css
.right-content{
flex: 1;
margin-left: 0.266667rem;
height: 100%;
overflow: hidden;
}
.right-list{
overflow: hidden;
height: 100%;
overflow: auto;
}base.css
写回答
1回答
-
同学你好，问题解答如下：
“right-content”设置了flex: 1;的确会占满父元素的剩余空间，但是如果它的子元素宽度超出，就会将其宽度撑开，即父元素占据的实际空间，与子元素有关，如下：
所以同学的页面中，当不给图片设置宽度时，由于部分图片比较宽，就会将父元素right-content的宽度撑大，所以就把左侧的内容挤没了。而此时就需要给right-content设置overflow: hidden;，它的作用就是让right-content的内容不要超出自己，即保持flex为1，因此左侧的内容没有被挤压，就可以显示出来了。
如果给图片设置固定宽度，也可以保证right-content的内容不超出，所以此时不设置 overflow: hidden;也可以正常显示，因此剩余空间是与图片有关系的。
对于此现象，同学了解一下就好。
祝学习愉快！
0
相似问题