0
Ich arbeite an einem persönlichen Projekt und die Website ist im Wesentlichen in 6 Boxen organisiert. Ich versuche, die Anpassung an die Größenanpassung/mobile Nutzung so anzupassen, dass bei einer Größenänderung des Fensters alle Blöcke vertikal ausgerichtet sind. Im Moment sind nur einige Blöcke vertikal ausgerichtet und andere nicht, wodurch die Site unorganisiert wirkt.CSS- horizontale divs werden beim Skalieren nicht gestapelt?
Mein Code: https://jsfiddle.net/mxLh1ayy/1/
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));
\t $('#env_result').html(stockFactsEnv(diff, quantity));
$('#health_result').html(stockFactsHealth(diff, quantity));
$('#soc_result').html(stockFactsSocial(diff, quantity));
\t $('#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]
}.main-container{
display: flex;
flex-wrap: wrap;
}
*{
padding : 0;
margin : 0;
}
body{
height : 100vh;
background-color: #F8F8FF;
}
.topnav {
height: 50px;
width: 100%;
color: white;
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;
}
.box-1{
width : 25%;
margin-left: 5%;
display : inline-block;
text-align : center;
font-size : 1.5em;
}
.box{
width : 22%;
display : inline-block;
text-align : center;
font-size : 1.5em;
}
.box-2{
width : 48%;
margin-top: 1%;
display : inline-block;
text-align : center;
font-size : 1.5em;
}
@media screen and (max-width: 480px) {
.box{
display : block;
width : auto;
}
.box-2{
display : block;
width : ;
}
}
.color-red{
color:red;
background:transparent}
.color-green{
color:green;
background:transparent}
<style type="text/css">
#share-buttons img {
width: 35px;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
background: transparent;
}
</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><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<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>
<div class="main-container">
<div class="box-1">
<label>
Servings:
<br>
<input type="number" id="numberOfStocks" value="1" min="0" />
</label>
<br>
<h3>The impact of swapping<span class="servingUnit"></span> of</h3>
<select class="selectStock">
<option value="-1">Pick a food!</option>
</select>
<h3>
<br>
with
<span class="servingUnit"></span> of:</h3>
<select class="selectStock">
<option value="-1">Pick a food!</option>
</select>
<br>
<h2></h2>
</div>
<div class="box"><i class="fa fa-car" style="color:#A9A9A9"></i> Environmental Impact:</h2><div id="env_result"></div></div>
<div class="box"><i class="fa fa-heartbeat" style="color:#FF69B4"></i> Health Impact:</h2><div id="health_result"></div></div>
<div class="box"><img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDI5OC4zNDUgMjk4LjM0NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjk4LjM0NSAyOTguMzQ1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTE4Ni42OTMsOTAuMjc0Yy0xMi4xNDQsMC0yMi4wMTIsOS44NjgtMjIuMDEyLDIyLjAwN2MwLDEyLjEzOCw5Ljg2OCwyMi4wMTIsMjIuMDEyLDIyLjAxMiAgICBjMTIuMTM2LDAsMjIuMDE2LTkuODc0LDIyLjAxNi0yMi4wMTJDMjA4LjcwOCwxMDAuMTQzLDE5OC44MjMsOTAuMjc0LDE4Ni42OTMsOTAuMjc0eiBNMTg2LjY5MywxMjMuNTM3ICAgIGMtNi4yMDYsMC0xMS4yNjEtNS4wNDItMTEuMjYxLTExLjI2MmMwLTYuMjA4LDUuMDQ0LTExLjI1NSwxMS4yNjEtMTEuMjU1YzYuMjA5LDAsMTEuMjY1LDUuMDQyLDExLjI2NSwxMS4yNTUgICAgQzE5Ny45NTMsMTE4LjQ5NSwxOTIuOTA3LDEyMy41MzcsMTg2LjY5MywxMjMuNTM3eiIgZmlsbD0iIzhjNDYzNyIvPgoJCTxjaXJjbGUgY3g9IjEwNS4yMzQiIGN5PSIxMTIuMjgxIiByPSIxMS4yNTYiIGZpbGw9IiM4YzQ2MzciLz4KCQk8cGF0aCBkPSJNMjkyLjQwNSwyMS4yMjRMMjY4Ljg4Nyw1LjE2NmMtMS41MTctMS4wMzctMy40NTMtMS4yMzEtNS4xNDktMC41MDRMMjMzLjM0OSwxNy42OUMyMzAuMTYzLDcuNDgzLDIyMC43NDEsMCwyMDkuNDk2LDAgICAgYy0xMS45NzksMC0yMi4wMDYsOC40NTctMjQuNDczLDE5LjcxN2gtNzEuOTQ2QzExMC42MDQsOC40NTcsMTAwLjU4MywwLDg4LjU5NywwYy0xMS4yMDgsMC0yMC42MDksNy40MzQtMjMuODIsMTcuNTg4ICAgIEwzNC42MTIsNC42NjJjLTEuNjgzLTAuNzIyLTMuNjI4LTAuNTM4LTUuMTUsMC41MDRMNS45NDQsMjEuMjI0Yy0yLjE4MSwxLjQ4OC0yLjk1NSw0LjM1MS0xLjgyNyw2Ljc0bDE0LjkxMSwzMS41NDEgICAgYzAuODkyLDEuODg3LDIuNzg0LDMuMDgxLDQuODU4LDMuMDgxaDIyLjcxMUw2MC4xNCw3MC4wM2wtOS4wNjgsMTE0LjcyOWMtMC43NjQsNS4zMDMtMS4xMTgsOS43OTUtMS4xMTgsMTQuMTQzICAgIGMwLDU0LjgzNCw0NC42MDksOTkuNDQ0LDk5LjQ0NCw5OS40NDRjNTQuODM4LDAsOTkuNDU4LTQ0LjYxLDk5LjQ1OC05OS40NDRjMC00LjM0OC0wLjM1NS04Ljg0LTEuMDgtMTMuNzk1bC05LjEyOS0xMTUuMzA3ICAgIGwxMy4xMDItNy4yMDJoMjIuNzFjMi4wODksMCwzLjk3OS0xLjIsNC44NTktMy4wODJsMTQuOTA5LTMxLjU0MUMyOTUuMzU1LDI1LjU3NSwyOTQuNTg5LDIyLjcyMiwyOTIuNDA1LDIxLjIyNHogTTIwOS40OTYsMTAuNzUxICAgIGM2LjAwNSwwLDExLjEzOSwzLjcxMywxMy4yNzYsOC45NjZoLTI2LjU0MUMxOTguMzUsMTQuNDY1LDIwMy40OSwxMC43NTEsMjA5LjQ5NiwxMC43NTF6IE0xMjcuMjQ1LDExMi4yODIgICAgYzAsMTIuMTM4LTkuODc1LDIyLjAxMi0yMi4wMTEsMjIuMDEyYy0xMi4xMzksMC0yMi4wMTMtOS44NzQtMjIuMDEzLTIyLjAxMmMwLTEyLjEzOSw5Ljg3NC0yMi4wMDcsMjIuMDEzLTIyLjAwNyAgICBDMTE3LjM3MSw5MC4yNzQsMTI3LjI0NSwxMDAuMTQzLDEyNy4yNDUsMTEyLjI4MnogTTg4LjYwMiwxMC43NTFjNi4wMDUsMCwxMS4xNCwzLjcxMywxMy4yNzMsOC45NjZINzUuMzI2ICAgIEM3Ny40NiwxNC40NjUsODIuNTkxLDEwLjc1MSw4OC42MDIsMTAuNzUxeiBNMjcxLjA1LDUxLjg0MWgtMjAuNjk0Yy0wLjkwNiwwLTEuOCwwLjIyNi0yLjU4MSwwLjY2N2wtMTcuMzYsOS41NDEgICAgYy0xLjg0OSwxLjAxLTIuOTM1LDMuMDI2LTIuNzY3LDUuMTM5bDkuNDQzLDExOS4wOTJjMC42ODMsNC43OTksMS4wMTMsOC44MDksMS4wMTMsMTIuNjIxYzAsNDguOTI0LTM5Ljc5LDg4LjcwMy04OC43MDcsODguNzAzICAgIGMtNDguOTE2LDAtODguNjk0LTM5Ljc3OS04OC42OTQtODguNzAzYzAtMy44MTIsMC4zMjMtNy44MjIsMS4wNDItMTIuOTU2bDEuOTQyLTI0LjUxbDYuNzc3LDUuMDY2ICAgIGMwLjE3MywwLjEyLDAuMzQ0LDAuMjQxLDAuNTI3LDAuMzQxYzAuODk3LDAuNTE0LDE3LjgzNSwxMC4xNDEsMzYuNTQyLDEwLjE0MWM1LjAwNSwwLDEwLjEzOS0wLjY4MSwxNS4xMjEtMi40MTggICAgYzExLjc5Ni00LjExMSwyMC41NDYtMTMuMjA4LDI2LjAwNi0yNy4wNDdjMTUuODA1LTQwLjAxMSwxNC42ODMtOTguNTU0LDEzLjg2Mi0xMTcuMDUxaDY3LjE3MmMwLjczLDAsMS40Ni0wLjE0NCwyLjEyMi0wLjQzNSAgICBsMzMuNDI4LTE0LjMyNmwxNy4yOTcsMTEuODExTDI3MS4wNSw1MS44NDF6IiBmaWxsPSIjOGM0NjM3Ii8+CgkJPHBhdGggZD0iTTEzMC40NzYsMjM4Ljg0OWM1LjgxOSwwLDEwLjUzNiw0LjcxMywxMC41MzYsMTAuNTNjMCw1LjgyLTQuNzE2LDEwLjU0MS0xMC41MzYsMTAuNTQxICAgIGMtNS44MTksMC0xMC41MzYtNC43MjEtMTAuNTM2LTEwLjU0MUMxMTkuOTQsMjQzLjU2MiwxMjQuNjU3LDIzOC44NDksMTMwLjQ3NiwyMzguODQ5eiIgZmlsbD0iIzhjNDYzNyIvPgoJCTxwYXRoIGQ9Ik0xNzkuMjM3LDIzOC44NDljNS44MTcsMCwxMC41MzYsNC43MTMsMTAuNTM2LDEwLjUzYzAsNS44Mi00LjcxOSwxMC41NDEtMTAuNTM2LDEwLjU0MSAgICBjLTUuODE0LDAtMTAuNTM1LTQuNzIxLTEwLjUzNS0xMC41NDFDMTY4LjcwMiwyNDMuNTYyLDE3My40MjIsMjM4Ljg0OSwxNzkuMjM3LDIzOC44NDl6IiBmaWxsPSIjOGM0NjM3Ii8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==" /> Social Impact:
<div id="soc_result"></div></div>
<br>
<div class="box-2"><h3>
If you made this switch every day for a year, you would:</h3>
<div id="year_result">
</div></div>
<div class="box-2"> <h3>If everyone in America made this switch for just one meal, we would:</h3>
<div id="US_result">
</div></div>
</div></div>
</body>
<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>schaute ich auf andere Referenzen sagen, dass ich nur ein Inline-Block zu verwenden, benötigt und angewandt, aber es ist immer noch auf Arbeit. Jede Hilfe/Anleitung würde sehr geschätzt werden
Wie diese Frage aus dem [letzten] unterscheidet (http://stackoverflow.com/questions/43839075/css-how-to-make-my-elements-responsively-stack-on-top-of -jeweils-anders-für-mobil) [zwei] (http://stackoverflow.com/questions/43835035/css-rearranging-specific-elements-to-be-side-by-side-but-stacked-when-using -mob) Fragen? – j08691
Sie haben diese letzte Nacht gepostet und ich habe Ihnen gesagt, dass Sie 'float'ed und' inline-block' Elemente in 'block', nicht' inline-block' ändern und 'width: 100%;' oder 'width: auto verwenden sollen 'wenn es ein Blockelement ist. https://jsfiddle.net/mxLh1ayy/2/ –
Das war ein Problem in Bezug auf die Positionierung von Text innerhalb der Boxen. Ich habe auch versucht, dieses Thema in der Frage anzusprechen, aber ich habe keine Anleitung dazu bekommen. –