小编tac*_*shy的帖子

<div style="height:50px;display:flex;width:500px;border-radius: 20px;">
  <div style="height:50px;width:30%;background:red"></div>
  <div style="height:50px;width:30%;background:blue"></div>
  <div style="height:50px;width:40%;background:yellow"></div>
</div>

#wrapper {
  display: grid;
  grid-template-columns: repeat(5, 90px);
  grid-auto-rows: 50px;
  grid-gap: 5px;
  width: 516px;
}

.wide {
  grid-row: 1 / 4;
  grid-column: 3 / 5;
  background-color: red;
}

.block {
  background-color: grey;
}

<div id="wrapper">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block wide"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

<!-- Tailwind -->\n<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">\n\n\n<!-- Body -->\n<div class="flex card bg-neutral h-48 px-3 hover:bg-primary">\n  <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">\n    <path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />\n  </svg>\n  <h2 class="text-2xl font-bold text-white py-3">Project name</h2>\n  <p class="text-left py-4 font-bold group-hover:bg-primary">Explaination of the project</p>\n  <p class="text-left pb-4 font-bold">Tag, tag, tag</p>\n</div>

.page-container {
  padding: 160px 48px 48px 48px;
  margin: 0 auto;
  max-width: calc(1080px + 96px);
  height: 90%;
  width: 100%;
  display: flex;
  justify-content: end;
  align-items: flex-end;
}

.title-container {
  background-color: red;
  max-width: 60vw;
  text-align: left;
}

<div className="page-container">
  <div className="title-container">
    <h1>
      Text <br /> More Text
    </h1>
    <br />
    <h3>Item1 / Item2 / Item3 / …

div {
  display: grid;
  grid-auto-flow: column;
}

p {
  border: 1px solid red;
  margin: 0;
}

table {
  border-collapse: collapse;
}

td {
  border: solid 2px red;
}

<h3>Not working: CSS Grid: The cells in the rows have different size.</h3>
<div>
  <p>ABC</p>
  <p>A</p>
  <p>ABCDEFGHIJKLMNOP</p>
</div>
<div>
  <p>ABCDEFGHIJKLMNOP</p>
  <p>A</p>
  <p>AB</p>
</div>
<hr>
<br>
<hr>
<h3>What I want: CSS Table: The cells in the rows have same size.</h3>
<table> …

.column {
  display: flex;
  flex-direction: column;
  padding: 10px 10px 10px 0;
}

.cell {
  text-align: right;
}

<div class="column">
  <div class="cell">
    <div class="item">
      <span>123123 $</span>
    </div>
    <div class="item">
      <span>(123 $)</span>
    </div>
    <div class="items">
      <span>(1235 $)</span>
    </div>
    <div class="item">
      <span>12414 $</span>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item">
      <img src="./img/slider/slider1.png" class="d-block w-100 active" alt="...">
    </div>
    <div class="carousel-item">
      <img src="./img/slider/slider2.png" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="./img/slider/slider3.png" class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

.labeled {\n  margin-left: 40px;\n  position: relative;\n}\n\n.labeled::before {\n  display: inline-block;\n  content: attr(data-label);\n  position: absolute;\n  width: 40px;\n  left: -40px;\n  /* How to vertically position so paragraph and label have same baseline? */\n}

<p class="labeled" data-label="L">Lorem ipsum<sup>SUPERSCRIPT</sup> dolor sit amet, consectetur adipiscing elit. Ut cursus sem in nisl pulvinar porta. Praesent laoreet nisl sit amet sagittis mollis. Aliquam sit amet erat vitae enim ullamcorper dapibus ut vel …

function changeBg(posicao) {
  var changer = document.getElementById(posicao);
  if (changer.checked = true) {
    changer.style.backgroundColor = "#FFCE00";
  }
}

<div class="posicao" id="um">
  <input class="input-posicao " onclick="changeBg('um')" name="posicao" value="um" type="radio">
</div>

<div class="posicao" id="dois">
  <input class="input-posicao " onclick="changeBg('dois')" name="posicao" value="dois" type="radio">
</div>

<div class="posicao">
  <input class="input-posicao" onclick="changeBg('tres')" name="posicao" value="tres" type="radio">
</div>

<div class="posicao">
  <input class="input-posicao" onclick="changeBg('quatro')" name="posicao" value="quatro" type="radio">
</div>

<div class="posicao">
  <input class="input-posicao" onclick="changeBg('cinco')" name="posicao" value="cinco" type="radio">
</div>

<div class="posicao">
  <input class="input-posicao" …

/* style22.css */


/* Définition des caractéristiques globales */

body {
  background-color: #FFF;
  font-weight: 400;
}

a {
  text-decoration: none;
  / color: #FFF;
}


/* Header */

#conteneur {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.header1 {
  background: blue;
}


/* Navigation */

nav ul {
  list-style-type: none;
  display: flex;
  background: red;
}

<header id="conteneur">

  <div class="header1">
    <div><a href="how.html"><span class="logo">ALGOBETTER</span></a></div>
  </div>

  <nav class="header2">
    <ul>
      <li><a href="gold_rules.html">Règles d'or</a></li>
      <li><a href="pronos.html">Pronostics</a></li>
    </ul>
  </nav> …

<script>
  document.getElementById("h1").style.marginLeft = "250px";
</script>

<h1 id="h1" style="position: absolute; text-align: center; top: 100px;  color: #E95928;  font-family:Helvetica; font-weight: bold; font-size:6vw; ">Shop till<br>you drop</h1>