Javascript CSS-水平div在调整大小时不会堆叠？

我正在做一个个人项目，网站基本上分为6个部分。我试图使它对调整大小/移动使用做出响应，以便在调整窗口大小时，所有块都垂直对齐。现在，只有一些区块垂直对齐，而有些则没有，这使得网站看起来杂乱无章

我的代码：

var股票=[ [生牛肉80/20盎司，115.4451262,3.293742347,72,4.85,5.65,0,2.142,19,20,0.000127510204,0.375,0.75,22.15988372,0.37682943,4]， [生牛肉90/10盎司，115.4451262,3.293742347,50,5.65,2.83,0,1.109,19,18,0.000127510204,0.375,0.75,22.15988372,0.37682943,4]， [鸡胸肉，盎司，32.39053977,0.3923520408,34,6.38,0.74,0,0.16,13,21,0.01631172356,0.10625,0.2125,3.149953226,0.3765300698,4]， [鸡大腿/腿，盎司，32.39053977,0.3923520408125,2.72,12.54,0,3.431,14,30,0.01631172356,0.10625,0.2125,3.149953226,0.3765799405,4]， [全脂牛奶，液体盎司，7.638924987,0.14623933,19,0.96,0.99,1.54,0.569,13,3,3.571428571e-7,0.099609375,0.19921875,1.228661955,0.2415694159,8]， [牛奶2%，液体盎司，7.638924987,0.06133157758,15,1.06,0.58,1.54,0.363,16,2,3.571428571e-7,0.099609375,0.19921875,1.228661955,0.2417190282,8]， [比萨奶酪，切片，42,0.976332736285,12.19,10.37,3.83,4.778640,18,0.00001071428571,2.98828125,5.9765625,36.85985865,0.466697922,4]， [冰激凌，杯子，32.59312,0.6191784396274.71344,4.6095984,14.4806576,27.9835216,8.94913952107.09168,55.87392,0.000003990994286,1.11311325,2.2262265,13.73003196,2.889031735,1]， [脱脂牛奶，液体盎司，7.638924987,0.05948052127,10,1.03,0.02,1.54,0.017,13,1,3.571428571e-7,0.099609375,0.19921875,1.228661955,0.2415694159,8]， [每个大蛋，43.13341461,0.5215603261,78,6.29,5.3,0.2,1.633,62186,0.00166667,0.265625,0.53125,3.713549,0.1305756192,1]， [羊羔肉，盎司，78.125,4.010117347,80,4.69,6.64,0,2.889,17,21,0.03333,0.3125,0.625,2.274815967,0.3767295528,4]， [硬奶酪，切片盎司，37.44571072,1.35234933105,6.59,8.41,0.14,5.32159,27,0.00000 3571428571,0.99609375,1.9921875,12.28661955,0.1303337926,1]， [酸奶，盎司，5.833333333,0.09395993304,17,0.98,0.92,1.32,0.595,13,4,3.571428571e-7,0.099609375,0.19921875,1.228661955,0.2229453548,6]， [希腊酸奶，香草脱脂，液体盎司，15,0.08285194565,22,2.45,0.05,1.01,0.038,10,1,8.928571429e-7,0.3984375,0.796875,3.071654888,0.1965527472,6]， [巧克力，盎司，127.316,0.1863325866151,2.16,8.39,14.57,5.238,22,7,7.142857143e-8,0.019921875,0.03984375,1.601963425,1.345070603,1.45]， [可可豆，盎司，179.739,0.625136,1.19,8.51,15.45,5.032,3,0,0,0,3.390577585,1.418619303,1.45]， [养殖鲑鱼，盎司，0.498125,0.56925,59,5.79,3.8,0,0.864,17,16,0.004464285714,0.078125,0.15625,0.5593288054,0.3767295528,4]， [罐装油金枪鱼，盎司，0.498125,0.1197485281,56,8.26,2.33,0,0.435118,5,0.000270197828,1.0625,2.125,0.5593288054,0.3817664985,4]， [Mayo，oz，14.41309121,0.1237135815193,0.27,21.22,0.16,3.318180,12,0.00041666667,0.06640625,0.1328125,0.92838725,0.1330748,0.5]， [生拉猪肉，盎司，44.84498316,0.7763814526,53,4.94,3.5,0,1.232,17,18,0.000520833333,0.21875,0.4375,1.592371177,0.3767295528,4]， [腌制黄油，盎司，41.58720633,0.5919085938203,0.24,22.95,0.02,14.537182,61,0.0000075,2.091796875,4.18359375,25.80190106,0.121322241,1]， [大豆汉堡，盎司，21.8,0.048125,50,4.44,1.78,0.3,0.408161,1,0,0,0,2.314125,0.03342563782,4]， [素食块金大豆，盎司，21.8,0.048125,52,4.88,1.63,0.65,0.325172,0,0,0,2.314125,0.06360340429,4]， [豆浆原味，液体盎司，2.319532348,0.024454449777,17,1,0.54,1.21,0.063,16,0,0,0,0,1.168382863,0.1032302684,8]， [豆腐，盎司，25.25,0.09625,23,2.82,1.49,0.2,0.26,1,0,0,0,4.62825,0.01698083545,4]， [Tempeh，oz，12.383064,0.0230998152,54,5.74,3.06,0,0.719,3,0,0,0,0,1.110771114,0.0001496122504,4]， [混合螺母，盎司，18.72285536,0.18425172,5.53,15.17,1.42,2.271,1,1,0,0,0,1.019662873,0.1202597201,1]， [面包，切片，9.735884788,0.1530147137,79,3.09,1.31,1.66,0.202137,0,0,0,0,0.5625,0.1473592997,2]， [扁豆，盎司，30.3684714,0.07425,33,2.55,0.11,0.51,0.015,1,0,0,0,2.287814892,0.04322383072,7.1]， [黑豆，盎司，30.3684714,0.141625,37,2.31,0.1,0.09,0.025,1,0,0,0,1.555714169,0.007668804863,7.1]， [番茄酱，盎司，3.13704,0.09375,11,0.47,0.06,1.37,0.008,57,0,0,0,0,0,0.4188459746,0.1188197409,8]， [Pinto豆子，盎司，30.3684714,0.141625,40,2.55,0.18,0.09,0.038,0,0,0,0,0,0,0,9075003086,0.007618934113,7.1]， [炸薯条，盎司，2.9337142,0.0417335921,56,0.82,1.91,0.14,0.359113,0,0,0,0,0,0.4200133922,0.01748707005,4]， [花生酱，盎司，36,0.2145167,6.81,14.13,2.97,2.153138,0,0,0,3.675378676,0.25830693,1]， [橄榄油，盎司，21.77842536,0.2306145384250,0,28.3,0,3.908,1,0,0,0,0,1.512500057,0.00004987075014,0.5]， [香蕉，中等，6.440662244,0.1763699536105,1.29,0.39,14.43,0.132,1,0,0,0,0,0.1768995697,1.221618974,1]， [混合蔬菜，盎司，2.41150377,0.125,18,0.81,0.04,0,0.009,10,0,0,0,0,0,3,0.0004987075014,4]， [营养酵母，g，0.08506329224,0.00706361088,3.9859577,0.5989518739,0,0,0,0， 0,0,0,0,0,5 ], [米白，盎司，25.46308329,0.34375102,1.87,0.16,0,0.045,0,0,0,0,0,0,0.3995205753,0,2]， [土豆，盎司，1.872285536,0.03575,16,0.73,0.03,0.2,0.007,3,0,0,0,0,0,0.06927480776,0.01708057695,5.3]， [植物油，盎司，17.70433203,0.125205,0,23.8,0,19.937,0,0,0,0,5.300817694,0,0.5]， [小麦粉，杯形，40.44136758,0.1235081329408,13.56,1.88,0.36,0.276,4,0,0,0,0,1.598082301,0.03067521945,0.25]， [人造奶油，盎司，9.915624199,0.06125102,0.28,11.32,0,2.048222,0,0,0,0,5.300817694,0.01107130653,1]， [玉米糖浆，液体盎司，11.15931776,0.01728062914109,0,0,29.31,0,1,0,0,0,0.4854914297,2.481282747,1]， [糖，盎司，11.23371322,0.01503093504110,0,0,28.3,0,0,0,0,0,0.4340729937,2.395731504,1]， [玉米粒，盎司，6.74022793,0.0104375103,2.67,1.34,0.18,0.189,10,0,0,0,0,0,0.4549631935,0.015736573,1]， [苏打，液体盎司，10.64647779,0.02494335117,13,0,0.08,3.05,0,1,0,0,0,0.1939638153,0.2582470824,12] ] 函数股票数据{ 返回{ 名称：数据[0]， 服务单位：数据[1]， 水：[数据[2]，]， 碳：[数据[3]，]， 卡路里：[数据[4]，]， 蛋白质：[数据[5]，'g']， fat:[数据[6]，'g']， saturatedFat:[数据[8]，'g']， sugar:[数据[7]，'g']， 钠：[数据[9]，'mg']， 胆固醇：[数据[10]，'mg']， 生命：[数据[11]，]， 提要：[数据[12]，]， 膳食：[数据[13]，]， 土地：[数据[14]，]， 医疗：[数据[15]，]， unitsPerServing:data[data.length-1] } } stocks=stocks.mapStock 变量$selects=$'.selectStock' 变量$数量=$'numberOfStocks' var$comparisonResult=$'.comparison.result' $selects.eachfunction{ $this.appendstocks.mapfunctionstock，i{ 返回新选项stock.name，i } } 函数格式数据、乘法器、数字、a{ data=data.slice 数据[0]=+数据[0]*乘数.toFixeddigits.toLocalString； 控制台日志数据； ifa==错误和数据[2]==更多{ 数据[0]=+数据[0]+ } ifa==坏数据和数据[2]==更少{ 数据[0]=+数据[0]+ } 如果a==良好&&数据[2]==较少，则为else{ 数据[0]=+数据[0]+ } 如果a==良好&&数据[2]==更多{ 数据[0]=+数据[0]+ } 返回数据。加入“” } 函数格式2数据、乘法器、数字、a{ data=data.slice 数据[0]=+数据[0]*乘数.toFixeddigits.toLocalString； 控制台日志数据； ifa==使用和数据[2]==更多{ 数据[0]=+数据[0]+ } ifa==使用和数据[2]==更少{ 数据[0]=+数据[0]+ } 如果a==发射和数据[2]==更少，则为else{ 数据[0]=+数据[0]+ } 否则，如果a==发出（&D）数据[2]==更多{ 数据[0]=+数据[0]+ } ifa==消费品和数据[2]==更多{ 数据[0]=+数据[0]+ } ifa==消费品和数据[2]==更少{ 数据[0]=+数据[0]+ } 返回数据。加入“” } 功能库存、库存、数量{ 返回[ formatstock.water，数量，2，不良，使用+'加仑水'+ formatstock.carbon，quantity，2，bad，排放量+'磅二氧化碳和甲烷当量'+ formatstock.Carries，数量，2，坏，消耗+卡路里+ formatstock.protein，数量，2，良好，消费良好+“蛋白质”+ formatstock.fat，数量，3，坏，消耗+脂肪'+ formatstock.saturatedFat，数量，2，不良，消耗+饱和脂肪'+ formatstock.sugar，数量，2，坏，消耗量+'糖'+ formatstock.Na，数量，2，不良，消耗量+“钠”+ formatstock.胆固醇，数量，2，不良，消耗+胆固醇'+ formatstock.Lifes，quantity，5，bad，save+“动物生命”+ formatstock.feed，数量，2，坏，需要+'磅饲料'+ formatstock.Founds，数量，2，不良，保存+“由饲料制成的餐食”+ formatstock.land，数量，2，坏，需要+所需土地的平方英尺+ $+formatstock.healthcare，数量，2，坏，保存+“预计医疗成本” ] } 函数stockFactsEnvstock，数量{ 返回[ formatstock.water，数量，2，不良，使用+'加仑水'+ formatstock.carbon，quantity，2，bad，排放量+'磅二氧化碳和甲烷当量'+ formatstock.land，数量，2，坏，需要+所需土地的平方英尺 ] } 功能库存工厂库存、数量{ 返回[ formatstock.Carries，数量，2，坏，消耗+卡路里+ formatstock.protein，数量，2，良好，消费良好+“蛋白质”+ formatstock.fat，数量，3，坏，消耗+脂肪'+ formatstock.saturatedFat，数量，2，不良，消耗+饱和脂肪'+ formatstock.sugar，数量，2，坏，消耗量+'糖'+ formatstock.Na，数量，2，不良，消耗量+“钠”+ formatstock.胆固醇，数量，2，不良，消耗+胆固醇'+ $+formatstock.healthcare，数量，2，坏，保存+“预计医疗成本” ] } 功能库存工厂社会库存，数量{ 返回[ formatstock.Lifes，quantity，5，bad，save+“动物生命”+ formatstock.feed，数量，2，坏，需要+'磅饲料'+ formatstock.Founds，数量，2，不良，保存+“由饲料制成的餐食” ] } 函数stockfacts库存，数量{ 返回[ 使用+formatstock.water，数量，2，坏，使用+gallions of water+ 电磁干扰 碳，数量，2，有害，排放量+'磅温室气体'+ 消耗+formatstock.carries，数量，2，坏，消耗+carries'+ 消耗+formatstock.protein，数量，2，good，consumergood+“蛋白质”+ 消费+formatstock.fat，数量，3，坏，消费+of fat+ 消费+形式库存。饱和脂肪，数量，2，不良，消费+饱和脂肪'+ 消耗+糖，数量，2，坏，消耗+糖'+ 消耗+钠，数量，2，坏，消耗+钠'+ 消费+formatstock.胆固醇，数量，2，坏，消费+of胆固醇'+ 需要+formatstock.Lifes，quantity，5，bad，save+“动物生命来生产食物”+ Require+formatstock.feed，quantity，2，bad，Require+生产食物的饲料磅+ 能够生产+formatstock.feed，quantity，2，bad，preserve+“由饲料制成的餐食”+ 需要+formatstock.land，quantity，2，bad，需要+square英尺的土地来生产食物+ 美国医疗保健系统成本约为+$+formatstock.healthcare，数量，2，坏，节省 ] } 功能库存工厂3库存、数量{ 返回[ 节约+formatstock.water，数量，2，坏，使用+gallions of water+ 排放+formatstock.carbon，数量，2，坏，排放+lbs温室气体+ 保存+格式库存。生命，数量，5，坏，保存+动物+ Feed+formatstock.膳食，数量，2，不良，保存+“人”+ 需要+格式库存。土地，数量，2，坏，需要+平方英尺土地+ 美国医疗保健系统成本约为+$+formatstock.healthcare，数量，2，坏，节省 ] } $selects.add$quantity.on'input'，updateAmount 函数getStock select{ 返回股票[+select.value] } 函数更新计数{ 变量数量=+$quantity.val $selects.eachfunction{ var$result=$this.nextAll.result'.empty var$amount=$this.prev.find'.servingUnit'.empty var stock=getStockthis 如果！股票回报 var金额=数量*库存。单位服务 $amount.text''+amount+''+stock.servingUnit+ $result.htmlstockFactsstock，金额 } var selected=[].map.call$selects，getStock $comparisonResult.empty 如果！已选择[0]| |！已选择[1]返回 var diff={} Object.keyselected[0]。foreachk函数{ if/^name | servingUnit | unitsPerServing$/.testk返回 var first=所选[0][k]。切片 var second=所选[1][k]。切片 第一个[0]*=所选[0]。单位服务 第二个[0]*=所选[1]。单位服务 diff[k]=[Math.absfirst[0]-second[0]，first[1]，first[0]>second[0]？“more'：“less”] } $comparisonResult.htmlstockFactsdiff，数量； $'env_result'.htmlstockFactsEnvdiff，数量； $“运行状况结果”。htmlstockFactsHealthdiff，数量； $'soc_结果'.htmlstockFactsSocialdiff，数量； $“年度结果”。htmlstockFacts2diff，数量*365； $'US_result'.htmlstockFacts3diff，数量*323148587； } $selects.add$quantity.on'input'，updateAmount 函数getStock select{ 返回股票[+select.value] } .主货柜{ 显示器：flex； 柔性包装：包装； } *{ 填充：0； 保证金：0； } 身体{ 高度：100vh； 背景色：F8FF； } 托普纳夫先生{ 高度：50px； 宽度：100%； 颜色：白色； 背景色：173； 溢出：隐藏； 文本对齐：居中； } /*设置导航栏内链接的样式*/ .topnav a{ 浮动：左； 显示：块； 颜色：F2F2； 文本对齐：居中； 填充：14px 16px； 文字装饰：无； 字号：17px； } /*更改悬停时链接的颜色*/ .topnav a:悬停{ 背景色：ddd； 颜色：黑色； } /*向活动/当前链接添加颜色*/ .topnav a.active{ 背景色：4CAF50； 颜色：白色； } .框-1{ 宽度：25%； 左缘：5%； 显示：内联块； 文本对齐：居中； 字号：1.5em； } .盒子{ 宽度：22%； 显示：内联块； 文本对齐：居中； 字号：1.5em； } .方框-2{ 宽度：48%； 利润率最高：1%； 显示：内联块； 文本对齐：居中； 字号：1.5em； } @媒体屏幕和最大宽度：480px{ .盒子{ 显示：块； 宽度：自动； } .方框-2{ 显示：块； 宽度：； } } .红色{ 颜色：红色； 背景：透明} .绿色{ 颜色：绿色； 背景：透明} 共享按钮{ 宽度：35px； 填充物：5px； 边界：0； 盒影：0； 显示：内联； 背景：透明； } /*当屏幕宽度小于980像素时，隐藏添加到任何垂直共享栏*/ @媒体屏幕和最大宽度：980px{ .a2a_浮动_样式.a2a_垂直_样式{显示：无；} } 一份： 交换数据的影响 挑选食物！ 具有 其中： 挑选食物！ 环境Impa 计算机断层扫描： 健康影响： 社会影响： 如果您在一年内每天都进行此切换，您将： 如果美国每个人都只吃一顿饭，我们会： 你留下了宽度：自动；媒体查询部分中.box-2类空白的属性

@media screen and (max-width: 480px) {
.box{
display : block;
width : auto;

}

.box-2{
display : block;
width : auto;

}
}

---

这个问题和你的问题有什么不同？你昨晚发布了这个问题，我告诉你将浮动块和内联块元素改为块，而不是内联块，并使用宽度：100%；或宽度：如果是块元素，则为“自动”。这就解决了文本在框中的定位问题。我也试图在问题中解决这个问题，但没有得到任何指导。。