本文介绍了CSS 重新排列特定元素并排，但在使用移动设备时堆叠/宽度太小?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我一直在研究这个营养计算器，但在格式化 CSS 以优化数据可视化时遇到了问题.我试过调整 div 并添加容器，但由于某种原因它只会导致重叠，我不知道如何修复.
我的代码: 用于桌面和
移动设备.在 CSS 中可能有一种简单的方法可以做到这一点，但我无法使用在线资源找到如何做到这一点.非常感谢您的帮助！
解决方案
第一:尝试在单独的 CSS 文件中编写 CSS.使维护变得简单，样式不会被覆盖.
使用媒体查询设置为100%并清除浮动
已经创建了一个示例来帮助 .请看一下 plunkr 链接:
https://plnkr.co/edit/DyTvCh3XzWoYx8MfXnIg?p=preview
CSS:
*{填充:0；边距:0；}身体{高度:100vh；}.导航栏{高度:50px；宽度:100%；背景:绿色；文本对齐:居中；白颜色;}.盒子{高度:250px；宽度:20%；背景:蓝色；显示:内联块；文本对齐:居中；字体大小:1.5em；白颜色;}.box-2{高度:250px；宽度:48%；背景:橙色；显示:内联块；文本对齐:居中；字体大小:1.5em；白颜色;}@media 屏幕和(最大宽度:480 像素){.盒子{显示:块；宽度:100%；}.box-2{显示:块；宽度:100%；}}I've been working on this nutrition calculator and am having trouble formatting the CSS to optimize data visualization. I've tried adjusting the divs and adding containers, but for some reason it just leads to overlaps I don't understand how to fix.
My code: https://jsfiddle.net/q024go3v/
var stocks= [
["Beef (80/20) raw","oz",115.4451262,3.293742347,72,4.85,5.65,0,2.142,19,20,0.0001275510204,0.375,0.75,22.15988372,0.3768292943,4 ],
["Beef (90/10) raw","oz",115.4451262,3.293742347,50,5.65,2.83,0,1.109,19,18,0.0001275510204,0.375,0.75,22.15988372,0.3768292943,4 ],
["Chicken breast","oz",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 ],
["Chicken thighs/legs","oz",32.39053977,0.3923520408,125,2.72,12.54,0,3.431,14,30,0.01631172356,0.10625,0.2125,3.149953226,0.3765799405,4 ],
["Milk (whole)","fl oz",7.638924987,0.146234933,19,0.96,0.99,1.54,0.569,13,3,3.571428571e-7,0.099609375,0.19921875,1.228661955,0.2415694159,8 ],
["Milk (2%)","fl oz",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 ],
["Pizza (cheese)","slice",42,0.976332736,285,12.19,10.37,3.83,4.778,640,18,0.00001071428571,2.98828125,5.9765625,36.85985865,0.466697922,4 ],
["Ice Cream","cup",32.59312,0.6191784396,274.71344,4.6095984,14.4806576,27.9835216,8.94913952,107.09168,55.87392,0.000003990994286,1.11311325,2.2262265,13.73003196,2.889031735,1 ],
["Milk (skim)","fl oz",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 ],
["Eggs (large)","each",43.13341461,0.5215603261,78,6.29,5.3,0.2,1.633,62,186,0.001666666667,0.265625,0.53125,3.713549,0.1305756192,1 ],
["Lamb","oz",78.125,4.010117347,80,4.69,6.64,0,2.889,17,21,0.03333333333,0.3125,0.625,2.274815967,0.3767295528,4 ],
["Cheese (hard)","slice (oz)",37.44571072,1.35234933,105,6.59,8.41,0.14,5.32,159,27,0.000003571428571,0.99609375,1.9921875,12.28661955,0.1303337926,1 ],
["Yogurt","oz",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 ],
["Greek yogurt, vanilla (nonfat)","fl oz",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 ],
["Chocolate","oz",127.316,0.1863325866,151,2.16,8.39,14.57,5.238,22,7,7.142857143e-8,0.019921875,0.03984375,1.601963425,1.345070603,1.45 ],
["Cacao","oz",179.739,0.625,136,1.19,8.51,15.45,5.032,3,0,0,0,0,3.390577585,1.418619303,1.45 ],
["Salmon (farmed)","oz",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 ],
["Tuna (canned in oil)","oz",0.498125,0.1197485281,56,8.26,2.33,0,0.435,118,5,0.000270197828,1.0625,2.125,0.5593288054,0.3817664985,4 ],
["Mayo","oz",14.41309121,0.1237135815,193,0.27,21.22,0.16,3.318,180,12,0.0004166666667,0.06640625,0.1328125,0.92838725,0.1330741748,0.5 ],
["Pulled Pork raw","oz",44.84498316,0.7763814526,53,4.94,3.5,0,1.232,17,18,0.0005208333333,0.21875,0.4375,1.592371177,0.3767295528,4 ],
["Butter (salted)","oz",41.58720633,0.5919085938,203,0.24,22.95,0.02,14.537,182,61,0.0000075,2.091796875,4.18359375,25.80190106,0.121322241,1 ],
["Soy Burger","oz",21.8,0.048125,50,4.44,1.78,0.3,0.408,161,1,0,0,0,2.314125,0.03342563782,4 ],
["Vegan Nuggets (soy)","oz",21.8,0.048125,52,4.88,1.63,0.65,0.325,172,0,0,0,0,2.314125,0.06360340429,4 ],
["Soymilk (original)","fl oz",2.319532348,0.02445449777,17,1,0.54,1.21,0.063,16,0,0,0,0,1.168382863,0.1032302684,8 ],
["Tofu","oz",25.25,0.09625,23,2.82,1.49,0.2,0.26,1,0,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 ],
["Mixed Nuts","oz",18.72285536,0.18425,172,5.53,15.17,1.42,2.271,1,1,0,0,0,1.019662873,0.1202597201,1 ],
["Bread","slice",9.735884788,0.1530147137,79,3.09,1.31,1.66,0.202,137,0,0,0,0,0.5625,0.1473592997,2 ],
["Lentils","oz",30.3684714,0.07425,33,2.55,0.11,0.51,0.015,1,0,0,0,0,2.287814892,0.04322383072,7.1 ],
["Black Beans","oz",30.3684714,0.141625,37,2.31,0.1,0.09,0.025,1,0,0,0,0,1.555714169,0.007668804863,7.1 ],
["Tomato Sauce","oz",3.13704,0.09375,11,0.47,0.06,1.37,0.008,57,0,0,0,0,0.4188459746,0.1188197409,8 ],
["Pinto Beans","oz",30.3684714,0.141625,40,2.55,0.18,0.09,0.038,0,0,0,0,0,0.9075003086,0.007618934113,7.1 ],
["French Fries","oz",2.9337142,0.0417335921,56,0.82,1.91,0.14,0.359,113,0,0,0,0,0.4200133922,0.01748707005,4 ],
["Peanut Butter","oz",36,0.2145,167,6.81,14.13,2.97,2.153,138,0,0,0,0,3.675378676,0.2583069893,1 ],
["Olive Oil","oz",21.77842536,0.2306145384,250,0,28.3,0,3.908,1,0,0,0,0,1.512500057,0.00004987075014,0.5 ],
["Banana","medium",6.440662244,0.1763699536,105,1.29,0.39,14.43,0.132,1,0,0,0,0,0.1768995697,1.221618974,1 ],
["Mixed vegetables","oz",2.41150377,0.125,18,0.81,0.04,0,0.009,10,0,0,0,0,3,0.0004987075014,4 ],
["Nutritional Yeast","g",0.08506329224,0.00706361088,3.9859577,0.5989518739,0,0,0,0,0,0,0,0,0,0,5 ],
["Rice (white)","oz",25.46308329,0.34375,102,1.87,0.16,0,0.045,0,0,0,0,0,0.3995205753,0,2 ],
["Potatoes","oz",1.872285536,0.03575,16,0.73,0.03,0.2,0.007,3,0,0,0,0,0.06927480776,0.01708057695,5.3 ],
["Vegetable Oil","oz",17.70433203,0.125,205,0,23.8,0,19.937,0,0,0,0,0,5.300817694,0,0.5 ],
["Wheat (flour)","cup",40.44136758,0.1235081329,408,13.56,1.88,0.36,0.276,4,0,0,0,0,1.598082301,0.03067521945,0.25 ],
["Margarine","oz",9.915624199,0.06125,102,0.28,11.32,0,2.048,222,0,0,0,0,5.300817694,0.01107130653,1 ],
["Corn Syrup","fl oz",11.15931776,0.01728062914,109,0,0,29.31,0,1,0,0,0,0,0.4854914297,2.481282747,1 ],
["Sugar","oz",11.23371322,0.01503093504,110,0,0,28.3,0,0,0,0,0,0,0.4340729937,2.395731504,1 ],
["Corn (grain)","oz",6.74022793,0.0104375,103,2.67,1.34,0.18,0.189,10,0,0,0,0,0.4549631935,0.01573657573,1 ],
["Soda","fl oz",10.64647779,0.02494335117,13,0,0.08,3.05,0,1,0,0,0,0,0.1939638153,0.2582470824,12 ]
]
function Stock (data) {
return {
name: data[0],
servingUnit: data[1],
water: [data[2], ''],
carbon: [data[3], ''],
calories: [data[4], ''],
protein: [data[5], 'g'],
fat: [data[6], 'g'],
saturatedFat: [data[8], 'g'],
sugar: [data[7], 'g'],
sodium: [data[9], 'mg'],
cholesterol: [data[10], 'mg'],
lives: [data[11], ''],
feed: [data[12], ''],
meals: [data[13], ''],
land : [data[14], ''],
healthcare : [data[15], ''],
unitsPerServing: data[data.length - 1]
}
}
stocks = stocks.map(Stock)
var $selects = $('.selectStock')
var $quantity = $('#numberOfStocks')
var $comparisonResult = $('.comparison .result')
$selects.each(function() {
$(this).append(stocks.map(function(stock, i) {
return new Option(stock.name, i)
}))
})
function format(data, multiplier, digits,a) {
data = data.slice()
data[0] = (+(data[0] * multiplier).toFixed(digits)).toLocaleString();
console.log(data);
if(a=="bad" && data[2]=="more"){
data[0]="<span class='color-red'>"+data[0]+"</span>"
}
if(a=="bad" && data[2]=="less"){
data[0]="<span class='color-green'>"+data[0]+"</span>"
}
else if (a=="good" && data[2]=="less"){
data[0]="<span class='color-red'>"+data[0]+"</span>"
}
else if (a=="good" && data[2]=="more"){
data[0]="<span class='color-green'>"+data[0]+"</span>"
}
return data.join(' ')
}
function format2(data, multiplier, digits,a) {
data = data.slice()
data[0] = (+(data[0] * multiplier).toFixed(digits)).toLocaleString();
console.log(data);
if(a=="use" && data[2]=="more"){
data[0]="<span class='color-red'>"+data[0]+"</span>"
}
if(a=="use" && data[2]=="less"){
data[0]="<span class='color-green'>"+data[0]+"</span>"
}
else if (a=="emit" && data[2]=="less"){
data[0]="<span class='color-green'>"+data[0]+"</span>"
}
else if (a=="emit" && data[2]=="more"){
data[0]="<span class='color-red'>"+data[0]+"</span>"
}
if(a=="consumegood" && data[2]=="more"){
data[0]="<span class='color-green'>"+data[0]+"</span>"
}
if(a=="consumegood" && data[2]=="less"){
data[0]="<span class='color-red'>"+data[0]+"</span>"
}
return data.join(' ')
}
function stockFacts(stock, quantity) {
return [
format(stock.water, quantity, 2,"bad","use") + ' gallons of water<br>' +
format(stock.carbon, quantity, 2,"bad","emit") + ' pounds of carbon dioxide and methane equivalents <br>' +
format(stock.calories, quantity, 2,"bad","consume") + ' calories<br>' +
format(stock.protein, quantity, 2,"good","consumegood") + ' of protein<br>' +
format(stock.fat, quantity, 3,"bad","consume") + ' of fat<br>' +
format(stock.saturatedFat, quantity, 2,"bad","consume") + ' of saturated fat<br>' +
format(stock.sugar, quantity, 2,"bad","consume") + ' of sugar<br>' +
format(stock.sodium, quantity, 2,"bad","consume") + ' of sodium<br>' +
format(stock.cholesterol, quantity, 2,"bad","consume") + ' of cholesterol<br>' +
format(stock.lives, quantity, 5,"bad","save") + ' animal lives<br>' +
format(stock.feed, quantity, 2,"bad","require") + ' pounds of feed<br>' +
format(stock.meals, quantity, 2,"bad","preserve") + ' meals made from feed<br>' +
format(stock.land, quantity, 2,"bad","require") + ' square feet of land needed<br>' +
"$"+format(stock.healthcare, quantity, 2,"bad","save") + ' in projected healthcare costs<br>'
]
}
function stockFactsEnv(stock, quantity) {
return [
format(stock.water, quantity, 2,"bad","use") + ' gallons of water<br>' +
format(stock.carbon, quantity, 2,"bad","emit") + ' pounds of carbon dioxide and methane equivalents <br>' +
format(stock.land, quantity, 2,"bad","require") + ' square feet of land needed<br>'
]
}
function stockFactsHealth(stock, quantity) {
return [
format(stock.calories, quantity, 2,"bad","consume") + ' calories<br>' +
format(stock.protein, quantity, 2,"good","consumegood") + ' of protein<br>' +
format(stock.fat, quantity, 3,"bad","consume") + ' of fat<br>' +
format(stock.saturatedFat, quantity, 2,"bad","consume") + ' of saturated fat<br>' +
format(stock.sugar, quantity, 2,"bad","consume") + ' of sugar<br>' +
format(stock.sodium, quantity, 2,"bad","consume") + ' of sodium<br>' +
format(stock.cholesterol, quantity, 2,"bad","consume") + ' of cholesterol<br>' +
"$"+format(stock.healthcare, quantity, 2,"bad","save") + ' in projected healthcare costs<br>'
]
}
function stockFactsSocial(stock, quantity) {
return [
format(stock.lives, quantity, 5,"bad","save") + ' animal lives<br>' +
format(stock.feed, quantity, 2,"bad","require") + ' pounds of feed<br>' +
format(stock.meals, quantity, 2,"bad","preserve") + ' meals made from feed<br>'
]
}
function stockFacts2(stock, quantity) {
return [
"Use " + format(stock.water, quantity, 2,"bad","use") + ' gallons of water<br>' +
"Emit " + format(stock.carbon, quantity, 2,"bad","emit") + ' pounds of greenhouse gases<br>' +
"Consume " + format(stock.calories, quantity, 2,"bad","consume") + ' calories<br>' +
"Consume " + format(stock.protein, quantity, 2,"good","consumegood") + ' of protein<br>' +
"Consume " + format(stock.fat, quantity, 3,"bad","consume") + ' of fat<br>' +
"Consume " + format(stock.saturatedFat, quantity, 2,"bad","consume") + ' of saturated fat<br>' +
"Consume " + format(stock.sugar, quantity, 2,"bad","consume") + ' of sugar<br>' +
"Consume " + format(stock.sodium, quantity, 2,"bad","consume") + ' of sodium<br>' +
"Consume " + format(stock.cholesterol, quantity, 2,"bad","consume") + ' of cholesterol<br>' +
"Require " + format(stock.lives, quantity, 5,"bad","save") + ' animal lives to produce your food<br>' +
"Require " + format(stock.feed, quantity, 2,"bad","require") + ' pounds of feed to produce your food<br>' +
"Be able to produce " + format(stock.meals, quantity, 2,"bad","preserve") + ' meals made from feed<br>' +
"Require " + format(stock.land, quantity, 2,"bad","require") + ' square feet of land to produce your food<br>' +
"Cost the US healthcare system approximately " + "$"+format(stock.healthcare, quantity, 2,"bad","save")
]
}
function stockFacts3(stock, quantity) {
return [
"Save " + format(stock.water, quantity, 2,"bad","use") + ' gallons of water<br>' +
"Emit " + format(stock.carbon, quantity, 2,"bad","emit") + ' pounds of greenhouse gases<br>' +
"Save " + format(stock.lives, quantity, 5,"bad","save") + ' animals<br>' +
"Feed " + format(stock.meals, quantity, 2,"bad","preserve") + ' people<br>' +
"Require " + format(stock.land, quantity, 2,"bad","require") + ' square feet of land<br>' +
"Cost the US healthcare system approximately " + "$"+format(stock.healthcare, quantity, 2,"bad","save")
]
}
$selects.add($quantity).on('input', updateAmount)
function getStock (select) {
return stocks[+select.value]
}
function updateAmount() {
var quantity = +$quantity.val()
$selects.each(function() {
var $result = $(this).nextAll('.result').empty()
var $amount = $(this).prev().find('.servingUnit').empty()
var stock = getStock(this)
if (!stock) return
var amount = quantity * stock.unitsPerServing
$amount.text(' (' + amount + ' ' + stock.servingUnit + ')')
$result.html(stockFacts(stock, amount))
})
var selected = [].map.call($selects, getStock)
$comparisonResult.empty()
if (!selected[0] || !selected[1]) return
var diff = {}
Object.keys(selected[0]).forEach(function (k) {
if (/^(name|servingUnit|unitsPerServing)$/.test(k)) return
var first = selected[0][k].slice()
var second = selected[1][k].slice()
first[0] *= selected[0].unitsPerServing
second[0] *= selected[1].unitsPerServing
diff[k] = [Math.abs(first[0] - second[0]), first[1], first[0] > second[0] ? 'more' : 'less']
})
$comparisonResult.html(stockFacts(diff, quantity));
$('#env_result').html(stockFactsEnv(diff, quantity));
$('#health_result').html(stockFactsHealth(diff, quantity));
$('#soc_result').html(stockFactsSocial(diff, quantity));
$('#year_result').html(stockFacts2(diff, quantity*365));
$('#US_result').html(stockFacts3(diff,quantity*323148587));
}
$selects.add($quantity).on('input', updateAmount)
function getStock (select) {
return stocks[+select.value]
}.side {
width: 300px;
}
.sideone {
width: 300px;
}
h2
{
display: inline-block;
}
.left
{
float: right;
}
.comparison {
width: 50%;
}
.outer {
display: flex;
width: 100%;
}
.content
{
width: 50%;
}
.color-red{
color:red;
background:transparent}
.color-green{
color:green;
background:transparent}
div {
background-color: white;
}
.topnav {
background-color: #173;
overflow: hidden;
text-align: center;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4CAF50;
color: white;
}
<style type="text/css">
#share-buttons img {
width: 35px;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
}
</style>
<style type="text/css">
/* Hide AddToAny vertical share bar when screen is less than 980 pixels wide */
@media screen and (max-width: 980px) {
.a2a_floating_style.a2a_vertical_style { display: none; }
}
</style><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topnav" id="myTopnav">
<a href="#ingredient">Ingredient Calculator</a>
<a href="#meal">Meal Calculator</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
<a href="#sources">Sources</a>
</div>
<br>
<label>
Servings:
<input type="number" id="numberOfStocks" value="1" min="0" />
</label>
<div class="outer">
<div class="content">
<div class="left">
<div class="side">
<h2>First Item<span class="servingUnit"></span>:</h2>
<select class="selectStock">
<option value="-1">Pick a food!</option>
</select>
<br>
<br>
<h2> vs. </h2>
<br>
<br>
</div>
<div class="sideone">
<h2>Second Item<span class="servingUnit"></span>:</h2>
<select class="selectStock">
<option value="-1">Pick a food!</option>
</select>
<br>
<br>
</div>
</div>
</div>
<div id = "container" style = "width:100%">
<div class="comparison">
<h2>Total Breakdown:</h2>
<br>
<div id ="left" style = "float: left; width: 35%;">
<h2><i class="fa fa-car"></i> Environment:</h2></div>
<div id = "middle" style = "float: center; width: 50%; height: 100%;">
<div id="env_result"></div></div>
<h2><i class="fa fa-heartbeat"></i> Health:</h2>
<div id="health_result"></div>
<div id = "right" style = "float:right; width: 25%;">
<h2><img src="https://i.imgur.com/hiDscpk.png" width= 50px> Social:</h2>
<div id="soc_result"></div></div>
<br>
</div>
</div>
</div>
<br>
<h2>If you made this switch every day for a year, you would:</h2>
<div id="year_result">
</div>
<br>
<h2 class = "comparison">If everyone in America made this switch for just one meal, we would:</h2>
<div id="US_result">
</div>
<div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_vertical_style" style="left:0px; top:150px;">
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_google_plus"></a>
<a class="a2a_button_pinterest"></a>
</div>
<script async src="https://static.addtoany.com/menu/page.js"></script>As you can see, it doesn't look too pretty at the moment. Here is how I need to structure the elements: for desktop and
for mobile. There is probably a simple way to do this in CSS but I'm having trouble finding how to do it using online resources. Really appreciate the help!
解决方案
First : Try to write the CSS in a separate CSS file. Makes maintenance easy and styles wont override.
use media query to set to 100% and clear the float
Have created a example to help . Please take a look at plunkr link :
https://plnkr.co/edit/DyTvCh3XzWoYx8MfXnIg?p=preview
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="navbar"> Navbar </div>
<div class="main-container">
<div class="box"> Box 1 </div>
<div class="box">Box 2 </div>
<div class="box"> Box 3</div>
<div class="box"> Box 4 </div>
</div>
<div class="second-container">
<div class="box-2"> Box 5 </div>
<div class="box-2"> Box 6</div>
</div>
</body>
</html>
CSS :
*{
padding : 0;
margin : 0;
}
body{
height : 100vh;
}
.navbar{
height : 50px;
width : 100%;
background : green;
text-align : center;
color : white;
}
.box{
height : 250px;
width : 20%;
background : blue;
display : inline-block;
text-align : center;
font-size : 1.5em;
color : white;
}
.box-2{
height : 250px;
width : 48%;
background : orange;
display : inline-block;
text-align : center;
font-size : 1.5em;
color : white;
}
@media screen and (max-width: 480px) {
.box{
display : block;
width : 100%;
}
.box-2{
display : block;
width : 100%;
}
}
这篇关于CSS 重新排列特定元素并排，但在使用移动设备时堆叠/宽度太小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！