小编bib*_*man的帖子

.grid-4-2-1 {
  display: grid;
  grid-template-areas: "grid-child-1 grid-child-2 grid-child-3 grid-child-4";
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 20px;
  margin: 20px;
}

.grid-child {
  position: relative;
  align-items: center;
  justify-content: space-between;
  padding-top: 100%;
  background-color: #fff;
  position: relative;
}

.grid-child .grid-content {
  position: absolute;
  right: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
}


@media only screen and (min-device-width: 768px) and (max-device-width: …

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> 

<table class="bg-danger table-responsive" style="width:300px; height:200px;">  
  <tr>
    <th scope="row">
      <div class="text-left">
        table-responsive
      </div>      
    </th>
  </tr>  
</table>

<table class="bg-success " style="width:300px; height:200px;">  
  <tr>
    <th scope="row">
      <div class="text-left">
        no table-responsive
      </div>      
    </th>
  </tr>  
</table>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.cube {
  width: 100px;
  height: 150px;
  position: absolute;
  background-color: red;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 50% auto;
}

.outterstack .left {
  min-width: 100px;
  min-height: 250px;
  transform-origin: 0 0;
  transform: rotate(90deg) skewX(-30deg) scaleY(0.864);
  background-color: grey;
}

.outterstack .right {
  min-height: 100px;
  min-width: 250px;
  transform-origin: 0 0;
  transform: rotate(-30deg) skewX(-30deg) scaleY(0.864);
  position: relative;
  bottom: 250px;
  background-color: grey;
}

.outterstack …

var swiper = new Swiper(".mySwiper", {
    direction: "vertical",
    speed: 600,
    allowTouchMove: false,
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
});

.swiper {
    width: 100%;
    height: 100%;
}

.swiper {
    width: 100%;
    /*height: 100%;*/
    /* height: 500px; */
    /* min-height: 500px; */
    max-height: 500px;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center; …

document.querySelector(\'#temp\').contentEditable = true;\n\nfunction createpdf() {\n  let body = document.body\n  let html = document.documentElement\n  let height = Math.max(body.scrollHeight, body.offsetHeight,\n    html.clientHeight, html.scrollHeight, html.offsetHeight)\n  let element = document.querySelector(\'#temp\')\n  let heightCM = height / 35.35\n  html2pdf(element, {\n    margin: 1,\n    filename: \'MyResume.pdf\',\n    image: {\n      type: \'jpeg\',\n      quality: 4\n    },\n    html2canvas: {\n      dpi: 400,\n      letterRendering: true,\n      scale: 3\n    },\n    jsPDF: {\n      orientation: \'portrait\',\n      unit: \'cm\',\n      //   format: [heightCM, 50]\n      format: \'a4\'\n\n    }\n  }).save()\n}

.flexlist {
  display: flex;
  flex-wrap: wrap;
  max-width: 700px;
}

.entry {
  position: relative;
  min-width: 96px;
  height: 100px;
  border: 1px solid red;
  margin: 1px;
}

.selected {
  background: red;
}

.absolute {
  position: absolute;
  left: 0;
  top: 100%;
  width: 300px;
  background: green;
  z-index: 1;
  height: 80px;
}

<div class="flexlist">
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry selected">
    <div class="absolute"></div>
  </div>
  <div class="entry"></div>
  <div class="entry"></div> …

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #ddd;
  min-height: 100vh;
}

.container {
  background: #aaa;
  max-width: 500px;
  margin: 0 auto;
  padding: 1rem;
  min-height: 100%;
  height: 100%;
}

/* Uncomment for the expected behaviour */
/*
html,
body {
  height: 100%
}
*/

<div class="container">
  <h1>Some generic title</h1>
  <p>Some random paragraph</p>
</div>