html - Flex 格式化全高

标签 html css flexbox

我正在研究卡路里计算器，但在使用 FLEX css 显示属性时遇到了一些问题。问题是我正在尝试使列处于正确的全高位置，但我做不到，我的 CSS 有什么问题吗？

谢谢!

附言由于 js，您可能必须单击其中一项才能显示正确的部分。不要担心任何其他格式问题，它还没有响应。

谢谢!

    <div id="wrapper">

  <ul class="flex-container-column">
  <li class="bases"></li>
  <li class="flex-steps base">BASES</li> 
  <li class="flex-item ingredient" data-calories="517.2" data-carbs="76.1" data-fat="14.4" data-proteins="20.8"  vegetarian glutenfree weightloss lactosefree vegan>RICE NOODLES</li>
  <li class="flex-item ingredient" data-calories="510.5" data-carbs="66.1" data-fat="14.1" data-proteins="29.8" vegetarian lactosefree>EGG NOODLES</li>
  <li class="flex-item ingredient" data-calories="506.9" data-carbs="76.9" data-fat="14.1" data-proteins="18.1" vegetarian lactosefree >VERMICELLI</li>
  <li class="flex-item ingredient" data-calories="476.6" data-carbs="53.8" data-fat="16.6" data-proteins="28" vegetarian lactosefree>WHOLE GRAIN NOODLES</li>
  <li class="flex-item ingredient" data-calories="514.8" data-carbs="72.4" data-fat="14.8" data-proteins="23" vegetarian>WHITE RICE</li>
  <li class="flex-item ingredient" data-calories="516" data-carbs="70.1" data-fat="16" data-proteins="22.9" glutenfree vegetarian>BROWN RICE</li>
  <li class="flex-item ingredient" data-calories="106.6" data-carbs="14.2" data-fat="1.8" data-proteins="8.4" glutenfree vegetarian lactosefree>VEGETABLE BASE</li>
</ul>
  
<ul class="flex-container-column">
  <li class="meats"></li>
  <li class="flex-steps meat">MEATS</li>
  <li class="flex-item ingredient" data-calories="65.9" data-carbs="0.2" data-fat="1.5" data-proteins="12.9" lactosefree glutenfree>CHICKEN</li>
  <li class="flex-item ingredient" data-calories="166.4" data-carbs="0.1" data-fat="14" data-proteins="10" glutenfree lactosefree>PORK</li>
  <li class="flex-item ingredient" data-calories="50.1" data-carbs="0.4" data-fat="2.9" data-proteins="5.6" glutenfree vegetarian lactosefree>SMOKED TOFU</li>
  <li class="flex-item ingredient" data-calories="120.8" data-carbs="0.3" data-fat="8.4" data-proteins="11" glutenfree lactosefree>BEEF</li>
  <li class="flex-item ingredient" data-calories="111.2" data-carbs="0.2" data-fat="7.2" data-proteins="11.4" glutenfree lactosefree>DUCK</li>
  <li class="flex-item ingredient" data-calories="107.5" data-carbs="2.4" data-fat="1.1" data-proteins="22" glutenfree lactosefree>PRAWNS</li>
</ul>
  
<ul class="flex-container-column">
  <li class="toppings"></li>
  <li class="flex-steps topping">TOPPINGS</li>
  <li class="flex-item ingredient" data-calories="11.3" data-carbs="1.2" data-fat="0.1" data-proteins="1.4" glutenfree vegetarian lactosefree>VEGETABLE MIX</li>
  <li class="flex-item ingredient" data-calories="160" data-carbs="9" data-fat="12" data-proteins="4" glutenfree vegetarian lactosefree>CASHEWS</li>
  <li class="flex-item ingredient" data-calories="11.2" data-carbs="2.5" data-fat="0" data-proteins="0.3" glutenfree vegetarian lactosefree>SWEET PEPPERS MIX</li>
  <li class="flex-item ingredient" data-calories="11" data-carbs="1.8" data-fat="0.2" data-proteins="0.5" glutenfree vegetarian lactosefree>WOOD EAR MUSHROOMS</li>
  <li class="flex-item ingredient" data-calories="10.8" data-carbs="1" data-fat="0" data-proteins="1.7" glutenfree vegetarian lactosefree>MUSHROOM</li>
  <li class="flex-item ingredient" data-calories="19.6" data-carbs="4.8" data-fat="0" data-proteins="0.1" glutenfree vegetarian lactosefree>PINEAPPLE</li>
  <li class="flex-item ingredient" data-calories="3.2" data-carbs="0.2" data-fat="0" data-proteins="0.6" glutenfree vegetarian lactosefree>BAMBOO SHOOTS</li>
  <li class="flex-item ingredient" data-calories="7.2" data-carbs="1" data-fat="0" data-proteins="0.8" glutenfree vegetarian vegan lactosefree>CHINESE CABBAGE</li>
</ul>
  
<ul class="flex-container-column">
  <li class="sauces"></li>
  <li class="flex-steps sauce">SAUCES</li>
  <li class="flex-item ingredient" data-calories="15" data-carbs="2.3" data-fat="0.6" data-proteins="0.1" glutenfree lactosefree>THAILAND-PADTHAI</li>
  <li class="flex-item ingredient" data-calories="9.2" data-carbs="2.2" data-fat="0" data-proteins="0.1" glutenfree vegetarian lactosefree>CHINESE SWEET & SOUR</li>
  <li class="flex-item ingredient" data-calories="9.8" data-carbs="0.9" data-fat="0.6" data-proteins="0.2" glutenfree vegetarian lactosefree>BURMA-GREEN CURRY</li>
  <li class="flex-item ingredient" data-calories="15.3" data-carbs="1.4" data-fat="0.9" data-proteins="0.4" glutenfree vegetarian lactosefree>INDONESIA-SATAY</li>
  <li class="flex-item ingredient" data-calories="11.5" data-carbs="1.2" data-fat="0.7" data-proteins="0.1" glutenfree lactosefree>LAOSZ-RED CURRY</li>
  <li class="flex-item ingredient" data-calories="7.2" data-carbs="1.3" data-fat="0" data-proteins="0.5" lactosefree>JAPAN-TERIYAKI</li>
</ul>
  
<ul class="flex-container-column">
  <li class="extratoppings"></li>
  <li class="flex-steps">EXTRA TOPPINGS</li>
  <li class="flex-item ingredient" data-calories="145.9" data-carbs="2.2" data-fat="12.3" data-proteins="6.6" glutenfree vegetarian lactosefree>ROASTED PEANUTS</li>
  <li class="flex-item ingredient" data-calories="14.6" data-carbs="3" data-fat="0.2" data-proteins="0.2" glutenfree vegetarian lactosefree>CORIANDER</li>
  <li class="flex-item ingredient" data-calories="95" data-carbs="1.4" data-fat="8.2" data-proteins="3.9" glutenfree vegetarian lactosefree>SESAME SEEDS</li>
  <li class="flex-item ingredient" data-calories="32.3" data-carbs="6" data-fat="0.3" data-proteins="1.4" glutenfree vegetarian lactosefree>BASIL</li>
  <li class="flex-item ingredient" data-calories="300" data-carbs="0.1" data-fat="12.46" data-proteins="1" glutenfree vegetarian lactosefree>COCONUT CHIPS</li>
</ul>
  

 
  
</div>  

<div class="summary" style="display:block;opacity:0;">
  
<div id="totalCalories">Total Calories: <span id="total"></span></div>  
<div id="totalCalories1">Total Carbs: <span id="totalCarbs"></span></div>
<span id="totalCalories1">Total Fat:</span> <span id="totalFats"></span> 
<span id="totalCalories1">Total Protein: <span id="totalProteins"></span></span>

                <br>
                <img id="typeImage" src="" height="50px" width="50px" alt="" />
                
                <img id="glutenFreeImage" src="" height="50px" width="50px" alt="" />
                <img id="vegetarianImage" src="" height="50px" width="50px" alt="" />
                <img id="typeImageWeightLoss" src="" height="50px" width="50px" alt="" />
                <img id="veganImage" src="" height="50px" width="50px" alt="" />
                <img id="lactoseFreeImage" src="" height="50px" width="50px" alt="" />
                <br>
                
                <div id="vegan"></div>
                <div id="glutenFree"></div>
                <div id="typeVegetarian"></div>
                <div id="typeWeightLoss"></div>
                <div id="vegetarian"></div>
                <div id="lactoseFree"></div>
            </span>

        </div>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

        <script src="js/index.js"></script>


#wrapper {width:100%;}
#total {width:30%; 
  height:100%;
  background: #424040;


}


body {background: #f3f3f3 url(http://blog.padthaiwokbar.com/wp-content/uploads/2017/09/whiteback.jpg);}

.bases {background: url("http://www.padthai.decorolux.com/wp-content/uploads/2017/11/bases.png") center no-repeat;height:170px; width:210px; list-style-type: none;opacity:0;}

.meats {background: url("http://www.padthai.decorolux.com/wp-content/uploads/2017/11/toppings.png") center no-repeat;height:170px; width:210px; list-style-type: none;opacity:0;}

.toppings {background: url("http://www.padthai.decorolux.com/wp-content/uploads/2017/11/toppings.png") center no-repeat;height:170px; width:210px; list-style-type: none; opacity:0;}
 
.sauces {background: url("http://www.padthai.decorolux.com/wp-content/uploads/2017/11/sauces.png") center no-repeat;height:170px; width:210px; list-style-type: none;opacity:0;}

.extratoppings {background: url("http://www.padthai.decorolux.com/wp-content/uploads/2017/11/sauces.png") center no-repeat;height:170px; width:210px; list-style-type: none; opacity:0;}




.flex-container-column {
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-flex-direction: column; /* Safari */
  flex-direction:         column;
  -webkit-flex-wrap: nowrap; /* Safari */
  flex-wrap:         nowrap;
  -webkit-justify-content: space-between; /* Safari */
  justify-content:         space-between;
  float:left;
  margin:0px;
}

.flex-steps {
  background:;
  padding: 5px;
  width: 200px;
  height: 50px;
  margin-top: 10px;
  list-style-type: none;
  line-height: 50px;
  color: #424040;
  font-weight: bold;
  font-size: 1.3em;
  text-align: center;
  font-family:"lithos pro";
  font-weight:700;
  
}

.flex-item {
  background: #424040;
  padding: 5px;
  width: 200px;
  height: 40px;
  margin-top: 10px;
  list-style-type: none;
  line-height: 40px;
  color: white;
  font-weight: bold;
  font-size: 0.8em;
  text-align: center;
  border: 2px solid black;
  font-family:"lithos pro";
  font-weight:300;
  
}

.flex-item:hover {
  background: #6FC0BB;
}

.clicked {
  background: #6FC0BB;
  
}


//* fonts *//
@font-face {
    font-family: 'Lithos Pro Black';
    font-style: normal;
    font-weight: normal;
    src: local('Li Pro Black'), url('https://blog.padthaiwokbar.com/wp-content/fonts/LithosPro-Black.otf') format('opentype');
}

@font-face {
    font-family: 'Lithos Pro Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Lithos Pro Regular'), url('https://blog.padthaiwokbar.com/wp-content/fonts/LithosPro-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'Lobster Two Italic';
    font-weight: normal;
    font-style: normal;
    src: local('Lobster Two Italic'), url('https://blog.padthaiwokbar.com/wp-content/fonts/LobsterTwo-Italic.otf') format('opentype');
}

@font-face {
    font-family: 'Proxima Nova';
    src: url('https://blog.padthaiwokbar.com/wp-content/fonts/Proxima Nova Alt Condensed Light.otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Proxima Nova';
    src: url ('https://blog.padthaiwokbar.com/content/fonts/Mark Simonson - Proxima Nova Thin.otf');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Proxima Nova';
    src: url('https://blog.padthaiwokbar.com/wp-content/fonts/Mark Simonson - Proxima Nova Thin Italic.otf');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Proxima Nova';
    src: url('https://blog.padthaiwokbar.com/wp-content/fonts/Mark Simonson - Proxima Nova Thin.otf');
    font-weight: 700;
    font-style: italic;
}

.summary {

  font-size: 1.3em;
  padding:5%;
  color:white;
  margin-left:75%;
  padding-top:15;
  min-height:100%;
  background:#f3f3f3 url(http://blog.padthaiwokbar.com/wp-content/uploads/2017/09/greyback.jpg); 
  
}

#totalCalories {margin-top:70%; 
  font-size:1.2em; 
  color: #424040;   
  color:white;
  font-family: "Lobster Two";}
#totalCalories1 {
  margin-top:3%; 
  font-size:1em; 
  color: #424040;}

/* RESPONSIVE */

/* 1440 media */

@media screen and (max-width: 1440px) {
  
  .flex-container-column {
  margin:10px;
    padding:0px;
}

.flex-steps {

  padding: 5px;
  width: 180px;
  height: 30px;
  margin-top: 10px;
  margin-bottom:30px;
  list-style-type: none;
  line-height: 30px;
  font-size: 1.3em;
  text-align: center;
  font-weight:700;
  
}

.flex-item {
  
  padding: 5px;
  width: 180px;
  height: 30px;
  margin-top: 10px;
  list-style-type: none;
  line-height: 30px;
  font-weight: bold;
  font-size: 0.7em;
  border: 2px solid black;
  
  
  
}

 .total {
  color:white;
  font-family: "Lobster Two";
  font-size: 1.3em;
  background: #424040;
  
  
  }
 
  
  #totFat {
    display:block;
    line-height:0;
  
  }
  
  
  
}



 $(document).ready(function() {
      
      $('.bases').css("opacity", 0);
      $('.meats').css("opacity", 0);
      $('.sauces').css("opacity", 0);
      $('.bases').fadeTo( 1000, 1 );
      $('.meats').fadeTo( 1000, 1 );
      $('.sauces').fadeTo( 1000, 1 );
      $('.summary').fadeTo( 1000, 1 );
      });



$(document).ready(function() {
  $('.ingredient').click(function() {
    var calories = $(this).data('calories');
    var carbs = $(this).data('carbs');
    var fat = $(this).data('fat');
    var proteins = $(this).data('proteins');
    var totalNum = $('#total');
    var totalCarbs = $('#totalCarbs');
    var totalFats = $('#totalFats');
    var totalProteins = $('#totalProteins');
    var pressed = $(this).hasClass('clicked');
    var currentCalories = +totalNum.html();
    var currentCarbs = +totalCarbs.html();
    var currentFats = +totalFats.html();
    var currentProteins = +totalProteins.html();

    if (pressed) {
      $(this).removeClass('clicked');
      totalNum.text(+(currentCalories - calories).toFixed(1)); 
      totalCarbs.text(+(currentCarbs - carbs).toFixed(1));
      totalFats.text(+(currentFats - fat).toFixed(1));
      totalProteins.text(+(currentProteins - proteins).toFixed(1));
      
    } else {
      $(this).addClass('clicked');
      totalNum.text(+(currentCalories + calories).toFixed(1)); 
      totalCarbs.text(+(currentCarbs + carbs).toFixed(1)); 
      totalFats.text(+(currentFats + fat).toFixed(1)); 
      totalProteins.text(+(currentProteins + proteins).toFixed(1));
    }


    
    // vegan      
    var vegan = false;
    var vegetarian = false;
    var glutenfree = false;
    var lactosefree = false;
    var weightloss = false;
    
    //Vegan
    
    $(".ingredient.clicked").each(function() {
      if (typeof $(this).attr("vegan") != "undefined") {
        vegan = true;
      } else {
        vegan = false;
        return false;
      }
    });

    if (vegan) {
      $('#vegan').text("Ez az összeállítás Vegán");
      $('#veganImage').css("opacity", 0);
      $('#veganImage').attr("src", "http://blog.padthaiwokbar.com/wp-content/uploads/2017/11/vegan2.png");
      $('#veganImage').fadeTo( 1000, 1 );
    } else {
      $('#vegan').text("");
      $('#veganImage').fadeTo( 1000, 0 );
    }
    
  //Glutenfree  
    
    $(".ingredient.clicked").each(function() {
      if (typeof $(this).attr("glutenfree") != "undefined") {
        glutenfree = true;
      } else {
        glutenfree = false;
        return false;
      }
    });

    if (glutenfree) {
      $('#glutenFree').text("Ez az összeállítás gluténmentes");
      $('#glutenFreeImage').css("opacity", 0);
      $('#glutenFreeImage').attr("src", "http://blog.padthaiwokbar.com/wp-content/uploads/2017/10/glutenfree-1.png");
      $('#glutenFreeImage').fadeTo( 1000, 1 );
    } else {
      $('#glutenFree').text("");
      $('#glutenFreeImage').fadeTo( 1000, 0 );
    }

 //Vegetarian   
    
    $(".ingredient.clicked").each(function() {
      if (typeof $(this).attr("vegetarian") != "undefined") {
        vegetarian = true;
      } else {
        vegetarian = false;
        return false;
      }
    });

    if (vegetarian) {
      $('#vegetarian').fadeIn(3000);
      $('#vegetarian').text("Ez az összeállítás vegetáriánus");
      $('#vegetarianImage').css("opacity", 0);
      $('#vegetarianImage').attr("src", "http://blog.padthaiwokbar.com/wp-content/uploads/2017/11/vegetarian.png");
      $('#vegetarianImage').fadeTo( 1000, 1 );
    } else {
      $('#vegetarian').text("");
      $('#vegetarianImage').fadeTo( 1000, 0 );
    }
    
  //Weightloss  
    
    $(".ingredient.clicked").each(function() {
      if (typeof $(this).attr("weightloss") != "undefined") {
        weightloss = true;
      } else {
        weightloss = false;
        return false;
      }
    });

    if (weightloss) {
      $('#typeWeightLoss').text("This bowl is considered to be low-calorie!");
      $('#typeImageLactoseFree').css("opacity", 0);
      $('#typeImageWeightloss').fadeIn("slow");
      $('#typeImageWeightloss').attr("src", "https://upload.wikimedia.org/wikipedia/hi/thumb/b/b2/Veg_symbol.svg/768px-Veg_symbol.svg.png");
    } else {
      $('#typeWeightLoss').text("");
      $('#typeImageWeightLoss').fadeTo( 1000, 0 );
    }
    
//Lactosefree 
    
$(".ingredient.clicked").each(function() {
      if (typeof $(this).attr("lactosefree") != "undefined") {
        lactosefree = true;
      } else {
        lactosefree = false;
        return false;
      }
    });

    if (lactosefree) {
      $('#lactoseFree').text("Ez az összeállítás LactoseFree");
      $('#lactoseFreeImage').css("opacity", 0);
      $('#lactoseFreeImage').attr("src", "http://blog.padthaiwokbar.com/wp-content/uploads/2017/10/Lactose-free.png");
      $('#lactoseFreeImage').fadeTo( 1000, 1 );
    } else {
      $('#lactoseFree').text("");
      $('#lactoseFreeImage').fadeTo( 1000, 0 );
    }
        
  

  });
  
});

// Gluten-free esetén alapszósz és szójaszósz nélkül! Barna rizs glut free?//

// Vegetáriánus - Base sauce nélkül! A levesek nem vegák. Tojás nélkül!!!//

最佳答案

编辑:您缺少父元素上 100% 的高度 

$(document).ready(function() {

  $('.bases').css("opacity", 0);
  $('.meats').css("opacity", 0);
  $('.sauces').css("opacity", 0);
  $('.bases').fadeTo(1000, 1);
  $('.meats').fadeTo(1000, 1);
  $('.sauces').fadeTo(1000, 1);
  $('.summary').fadeTo(1000, 1);
});



$(document).ready(function() {
  $('.ingredient').click(function() {
    var calories = $(this).data('calories');
    var carbs = $(this).data('carbs');
    var fat = $(this).data('fat');
    var proteins = $(this).data('proteins');
    var totalNum = $('#total');
    var totalCarbs = $('#totalCarbs');
    var totalFats = $('#totalFats');
    var totalProteins = $('#totalProteins');
    var pressed = $(this).hasClass('clicked');
    var currentCalories = +totalNum.html();
    var currentCarbs = +totalCarbs.html();
    var currentFats = +totalFats.html();
    var currentProteins = +totalProteins.html();

    if (pressed) {
      $(this).removeClass('clicked');
      totalNum.text(+(currentCalories - calories).toFixed(1));
      totalCarbs.text(+(currentCarbs - carbs).toFixed(1));
      totalFats.text(+(currentFats - fat).toFixed(1));
      totalProteins.text(+(currentProteins - proteins).toFixed(1));

    } else {
      $(this).addClass('clicked');
      totalNum.text(+(currentCalories + calories).toFixed(1));
      totalCarbs.text(+(currentCarbs + carbs).toFixed(1));
      totalFats.text(+(currentFats + fat).toFixed(1));
      totalProteins.text(+(currentProteins + proteins).toFixed(1));
    }



    // vegan      
    var vegan = false;
    var vegetarian = false;
    var glutenfree = false;
    var lactosefree = false;
    var weightloss = false;

    //Vegan

    $(".ingredient.clicked").each(function() {
      if (typeof $(this).attr("vegan") != "undefined") {
        vegan = true;
      } else {
        vegan = false;
        return false;
      }
    });

    if (vegan) {
      $('#vegan').text("Ez az összeállítás Vegán");
      $('#veganImage').css("opacity", 0);
      $('#veganImage').attr("src", "http://blog.padthaiwokbar.com/wp-content/uploads/2017/11/vegan2.png");
      $('#veganImage').fadeTo(1000, 1);
    } else {
      $('#vegan').text("");
      $('#veganImage').fadeTo(1000, 0);
    }

    //Glutenfree  

    $(".ingredient.clicked").each(function() {
      if (typeof $(this).attr("glutenfree") != "undefined") {
        glutenfree = true;
      } else {
        glutenfree = false;
        return false;
      }
    });

    if (glutenfree) {
      $('#glutenFree').text("Ez az összeállítás gluténmentes");
      $('#glutenFreeImage').css("opacity", 0);
      $('#glutenFreeImage').attr("src", "http://blog.padthaiwokbar.com/wp-content/uploads/2017/10/glutenfree-1.png");
      $('#glutenFreeImage').fadeTo(1000, 1);
    } else {
      $('#glutenFree').text("");
      $('#glutenFreeImage').fadeTo(1000, 0);
    }

    //Vegetarian   

    $(".ingredient.clicked").each(function() {
      if (typeof $(this).attr("vegetarian") != "undefined") {
        vegetarian = true;
      } else {
        vegetarian = false;
        return false;
      }
    });

    if (vegetarian) {
      $('#vegetarian').fadeIn(3000);
      $('#vegetarian').text("Ez az összeállítás vegetáriánus");
      $('#vegetarianImage').css("opacity", 0);
      $('#vegetarianImage').attr("src", "http://blog.padthaiwokbar.com/wp-content/uploads/2017/11/vegetarian.png");
      $('#vegetarianImage').fadeTo(1000, 1);
    } else {
      $('#vegetarian').text("");
      $('#vegetarianImage').fadeTo(1000, 0);
    }

    //Weightloss  

    $(".ingredient.clicked").each(function() {
      if (typeof $(this).attr("weightloss") != "undefined") {
        weightloss = true;
      } else {
        weightloss = false;
        return false;
      }
    });

    if (weightloss) {
      $('#typeWeightLoss').text("This bowl is considered to be low-calorie!");
      $('#typeImageLactoseFree').css("opacity", 0);
      $('#typeImageWeightloss').fadeIn("slow");
      $('#typeImageWeightloss').attr("src", "https://upload.wikimedia.org/wikipedia/hi/thumb/b/b2/Veg_symbol.svg/768px-Veg_symbol.svg.png");
    } else {
      $('#typeWeightLoss').text("");
      $('#typeImageWeightLoss').fadeTo(1000, 0);
    }

    //Lactosefree 

    $(".ingredient.clicked").each(function() {
      if (typeof $(this).attr("lactosefree") != "undefined") {
        lactosefree = true;
      } else {
        lactosefree = false;
        return false;
      }
    });

    if (lactosefree) {
      $('#lactoseFree').text("Ez az összeállítás LactoseFree");
      $('#lactoseFreeImage').css("opacity", 0);
      $('#lactoseFreeImage').attr("src", "http://blog.padthaiwokbar.com/wp-content/uploads/2017/10/Lactose-free.png");
      $('#lactoseFreeImage').fadeTo(1000, 1);
    } else {
      $('#lactoseFree').text("");
      $('#lactoseFreeImage').fadeTo(1000, 0);
    }



  });

});

// Gluten-free esetén alapszósz és szójaszósz nélkül! Barna rizs glut free?//

// Vegetáriánus - Base sauce nélkül! A levesek nem vegák. Tojás nélkül!!!//
html {
  height: 100%;
}

body {
  height: 100%;
}

#wrapper {
  width: 100%;
}

#total {
  width: 30%;
  height: 100%;
  background: #424040;
}

body {
  background: #f3f3f3 url(http://blog.padthaiwokbar.com/wp-content/uploads/2017/09/whiteback.jpg);
}

.bases {
  background: url("http://www.padthai.decorolux.com/wp-content/uploads/2017/11/bases.png") center no-repeat;
  height: 170px;
  width: 210px;
  list-style-type: none;
  opacity: 0;
}

.meats {
  background: url("http://www.padthai.decorolux.com/wp-content/uploads/2017/11/toppings.png") center no-repeat;
  height: 170px;
  width: 210px;
  list-style-type: none;
  opacity: 0;
}

.toppings {
  background: url("http://www.padthai.decorolux.com/wp-content/uploads/2017/11/toppings.png") center no-repeat;
  height: 170px;
  width: 210px;
  list-style-type: none;
  opacity: 0;
}

.sauces {
  background: url("http://www.padthai.decorolux.com/wp-content/uploads/2017/11/sauces.png") center no-repeat;
  height: 170px;
  width: 210px;
  list-style-type: none;
  opacity: 0;
}

.extratoppings {
  background: url("http://www.padthai.decorolux.com/wp-content/uploads/2017/11/sauces.png") center no-repeat;
  height: 170px;
  width: 210px;
  list-style-type: none;
  opacity: 0;
}

.flex-container-column {
  display: -webkit-flex;
  /* Safari */
  display: flex;
  -webkit-flex-direction: column;
  /* Safari */
  flex-direction: column;
  -webkit-flex-wrap: nowrap;
  /* Safari */
  flex-wrap: nowrap;
  -webkit-justify-content: space-between;
  /* Safari */
  justify-content: space-between;
  float: left;
  margin: 0px;
}

.flex-steps {
  background: ;
  padding: 5px;
  width: 200px;
  height: 50px;
  margin-top: 10px;
  list-style-type: none;
  line-height: 50px;
  color: #424040;
  font-weight: bold;
  font-size: 1.3em;
  text-align: center;
  font-family: "lithos pro";
  font-weight: 700;
}

.flex-item {
  background: #424040;
  padding: 5px;
  width: 200px;
  height: 40px;
  margin-top: 10px;
  list-style-type: none;
  line-height: 40px;
  color: white;
  font-weight: bold;
  font-size: 0.8em;
  text-align: center;
  border: 2px solid black;
  font-family: "lithos pro";
  font-weight: 300;
}

.flex-item:hover {
  background: #6FC0BB;
}

.clicked {
  background: #6FC0BB;
}

//* fonts *//
@font-face {
  font-family: 'Lithos Pro Black';
  font-style: normal;
  font-weight: normal;
  src: local('Li Pro Black'), url('https://blog.padthaiwokbar.com/wp-content/fonts/LithosPro-Black.otf') format('opentype');
}

@font-face {
  font-family: 'Lithos Pro Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Lithos Pro Regular'), url('https://blog.padthaiwokbar.com/wp-content/fonts/LithosPro-Regular.otf') format('opentype');
}

@font-face {
  font-family: 'Lobster Two Italic';
  font-weight: normal;
  font-style: normal;
  src: local('Lobster Two Italic'), url('https://blog.padthaiwokbar.com/wp-content/fonts/LobsterTwo-Italic.otf') format('opentype');
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('https://blog.padthaiwokbar.com/wp-content/fonts/Proxima Nova Alt Condensed Light.otf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url ('https://blog.padthaiwokbar.com/content/fonts/Mark Simonson - Proxima Nova Thin.otf');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('https://blog.padthaiwokbar.com/wp-content/fonts/Mark Simonson - Proxima Nova Thin Italic.otf');
  font-weight: 100;
  font-style: italic;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('https://blog.padthaiwokbar.com/wp-content/fonts/Mark Simonson - Proxima Nova Thin.otf');
  font-weight: 700;
  font-style: italic;
}

.summary {
  font-size: 1.3em;
  padding: 5%;
  color: white;
  margin-left: 75%;
  padding-top: 15;
  min-height: 100%;
  background: #f3f3f3 url(http://blog.padthaiwokbar.com/wp-content/uploads/2017/09/greyback.jpg);
}

#totalCalories {
  margin-top: 70%;
  font-size: 1.2em;
  color: #424040;
  color: white;
  font-family: "Lobster Two";
}

#totalCalories1 {
  margin-top: 3%;
  font-size: 1em;
  color: #424040;
}


/* RESPONSIVE */


/* 1440 media */

@media screen and (max-width: 1440px) {
  .flex-container-column {
    margin: 10px;
    padding: 0px;
  }
  .flex-steps {
    padding: 5px;
    width: 180px;
    height: 30px;
    margin-top: 10px;
    margin-bottom: 30px;
    list-style-type: none;
    line-height: 30px;
    font-size: 1.3em;
    text-align: center;
    font-weight: 700;
  }
  .flex-item {
    padding: 5px;
    width: 180px;
    height: 30px;
    margin-top: 10px;
    list-style-type: none;
    line-height: 30px;
    font-weight: bold;
    font-size: 0.7em;
    border: 2px solid black;
  }
  .total {
    color: white;
    font-family: "Lobster Two";
    font-size: 1.3em;
    background: #424040;
  }
  #totFat {
    display: block;
    line-height: 0;
  }
}
<div id="wrapper">

  <ul class="flex-container-column">
    <li class="bases"></li>
    <li class="flex-steps base">BASES</li>
    <li class="flex-item ingredient" data-calories="517.2" data-carbs="76.1" data-fat="14.4" data-proteins="20.8" vegetarian glutenfree weightloss lactosefree vegan>RICE NOODLES</li>
    <li class="flex-item ingredient" data-calories="510.5" data-carbs="66.1" data-fat="14.1" data-proteins="29.8" vegetarian lactosefree>EGG NOODLES</li>
    <li class="flex-item ingredient" data-calories="506.9" data-carbs="76.9" data-fat="14.1" data-proteins="18.1" vegetarian lactosefree>VERMICELLI</li>
    <li class="flex-item ingredient" data-calories="476.6" data-carbs="53.8" data-fat="16.6" data-proteins="28" vegetarian lactosefree>WHOLE GRAIN NOODLES</li>
    <li class="flex-item ingredient" data-calories="514.8" data-carbs="72.4" data-fat="14.8" data-proteins="23" vegetarian>WHITE RICE</li>
    <li class="flex-item ingredient" data-calories="516" data-carbs="70.1" data-fat="16" data-proteins="22.9" glutenfree vegetarian>BROWN RICE</li>
    <li class="flex-item ingredient" data-calories="106.6" data-carbs="14.2" data-fat="1.8" data-proteins="8.4" glutenfree vegetarian lactosefree>VEGETABLE BASE</li>
  </ul>

  <ul class="flex-container-column">
    <li class="meats"></li>
    <li class="flex-steps meat">MEATS</li>
    <li class="flex-item ingredient" data-calories="65.9" data-carbs="0.2" data-fat="1.5" data-proteins="12.9" lactosefree glutenfree>CHICKEN</li>
    <li class="flex-item ingredient" data-calories="166.4" data-carbs="0.1" data-fat="14" data-proteins="10" glutenfree lactosefree>PORK</li>
    <li class="flex-item ingredient" data-calories="50.1" data-carbs="0.4" data-fat="2.9" data-proteins="5.6" glutenfree vegetarian lactosefree>SMOKED TOFU</li>
    <li class="flex-item ingredient" data-calories="120.8" data-carbs="0.3" data-fat="8.4" data-proteins="11" glutenfree lactosefree>BEEF</li>
    <li class="flex-item ingredient" data-calories="111.2" data-carbs="0.2" data-fat="7.2" data-proteins="11.4" glutenfree lactosefree>DUCK</li>
    <li class="flex-item ingredient" data-calories="107.5" data-carbs="2.4" data-fat="1.1" data-proteins="22" glutenfree lactosefree>PRAWNS</li>
  </ul>

  <ul class="flex-container-column">
    <li class="toppings"></li>
    <li class="flex-steps topping">TOPPINGS</li>
    <li class="flex-item ingredient" data-calories="11.3" data-carbs="1.2" data-fat="0.1" data-proteins="1.4" glutenfree vegetarian lactosefree>VEGETABLE MIX</li>
    <li class="flex-item ingredient" data-calories="160" data-carbs="9" data-fat="12" data-proteins="4" glutenfree vegetarian lactosefree>CASHEWS</li>
    <li class="flex-item ingredient" data-calories="11.2" data-carbs="2.5" data-fat="0" data-proteins="0.3" glutenfree vegetarian lactosefree>SWEET PEPPERS MIX</li>
    <li class="flex-item ingredient" data-calories="11" data-carbs="1.8" data-fat="0.2" data-proteins="0.5" glutenfree vegetarian lactosefree>WOOD EAR MUSHROOMS</li>
    <li class="flex-item ingredient" data-calories="10.8" data-carbs="1" data-fat="0" data-proteins="1.7" glutenfree vegetarian lactosefree>MUSHROOM</li>
    <li class="flex-item ingredient" data-calories="19.6" data-carbs="4.8" data-fat="0" data-proteins="0.1" glutenfree vegetarian lactosefree>PINEAPPLE</li>
    <li class="flex-item ingredient" data-calories="3.2" data-carbs="0.2" data-fat="0" data-proteins="0.6" glutenfree vegetarian lactosefree>BAMBOO SHOOTS</li>
    <li class="flex-item ingredient" data-calories="7.2" data-carbs="1" data-fat="0" data-proteins="0.8" glutenfree vegetarian vegan lactosefree>CHINESE CABBAGE</li>
  </ul>

  <ul class="flex-container-column">
    <li class="sauces"></li>
    <li class="flex-steps sauce">SAUCES</li>
    <li class="flex-item ingredient" data-calories="15" data-carbs="2.3" data-fat="0.6" data-proteins="0.1" glutenfree lactosefree>THAILAND-PADTHAI</li>
    <li class="flex-item ingredient" data-calories="9.2" data-carbs="2.2" data-fat="0" data-proteins="0.1" glutenfree vegetarian lactosefree>CHINESE SWEET & SOUR</li>
    <li class="flex-item ingredient" data-calories="9.8" data-carbs="0.9" data-fat="0.6" data-proteins="0.2" glutenfree vegetarian lactosefree>BURMA-GREEN CURRY</li>
    <li class="flex-item ingredient" data-calories="15.3" data-carbs="1.4" data-fat="0.9" data-proteins="0.4" glutenfree vegetarian lactosefree>INDONESIA-SATAY</li>
    <li class="flex-item ingredient" data-calories="11.5" data-carbs="1.2" data-fat="0.7" data-proteins="0.1" glutenfree lactosefree>LAOSZ-RED CURRY</li>
    <li class="flex-item ingredient" data-calories="7.2" data-carbs="1.3" data-fat="0" data-proteins="0.5" lactosefree>JAPAN-TERIYAKI</li>
  </ul>

  <ul class="flex-container-column">
    <li class="extratoppings"></li>
    <li class="flex-steps">EXTRA TOPPINGS</li>
    <li class="flex-item ingredient" data-calories="145.9" data-carbs="2.2" data-fat="12.3" data-proteins="6.6" glutenfree vegetarian lactosefree>ROASTED PEANUTS</li>
    <li class="flex-item ingredient" data-calories="14.6" data-carbs="3" data-fat="0.2" data-proteins="0.2" glutenfree vegetarian lactosefree>CORIANDER</li>
    <li class="flex-item ingredient" data-calories="95" data-carbs="1.4" data-fat="8.2" data-proteins="3.9" glutenfree vegetarian lactosefree>SESAME SEEDS</li>
    <li class="flex-item ingredient" data-calories="32.3" data-carbs="6" data-fat="0.3" data-proteins="1.4" glutenfree vegetarian lactosefree>BASIL</li>
    <li class="flex-item ingredient" data-calories="300" data-carbs="0.1" data-fat="12.46" data-proteins="1" glutenfree vegetarian lactosefree>COCONUT CHIPS</li>
  </ul>




</div>

<div class="summary" style="display:block;opacity:0;">

  <div id="totalCalories">Total Calories: <span id="total"></span></div>
  <div id="totalCalories1">Total Carbs: <span id="totalCarbs"></span></div>
  <span id="totalCalories1">Total Fat:</span> <span id="totalFats"></span>
  <span id="totalCalories1">Total Protein: <span id="totalProteins"></span></span>

  <br>
  <img id="typeImage" src="" height="50px" width="50px" alt="" />

  <img id="glutenFreeImage" src="" height="50px" width="50px" alt="" />
  <img id="vegetarianImage" src="" height="50px" width="50px" alt="" />
  <img id="typeImageWeightLoss" src="" height="50px" width="50px" alt="" />
  <img id="veganImage" src="" height="50px" width="50px" alt="" />
  <img id="lactoseFreeImage" src="" height="50px" width="50px" alt="" />
  <br>

  <div id="vegan"></div>
  <div id="glutenFree"></div>
  <div id="typeVegetarian"></div>
  <div id="typeWeightLoss"></div>
  <div id="vegetarian"></div>
  <div id="lactoseFree"></div>
  </span>

</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<script src="js/index.js"></script>

关于html - Flex 格式化全高，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47161611/

上一篇：html - 如何在复选框和标签旁边制作一个 div 棒？

下一篇：css - 菜单对齐- wordpress

相关文章：

html - Iscroll 中的固定元素

html - 什么时候需要在外部CSS样式开头使用通配符*来初始化或重置所有标签？

html - 长文本破坏了我的 flexbox 布局

html - 居中和底部对齐 flex 元素

jquery - 如何根据页面位置更改导航链接颜色

html - 当我悬停 css 菜单时，会出现水平滚动条

javascript - div 的明文，但使用 jquery 保留子节点

jquery - 使用 Bootstrap 设计数据表样式

jquery - 鼠标悬停时交叉淡入淡出 div

css - Chrome 显示问题与 flexbox 和溢出

©2024 IT工具网  联系我们