小编kuk*_*kuz的帖子

div {
  border: solid 1px black;
  margin: 5px;
  padding: 5px;
  background-color: #fff;
}
.container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
}
.item {
  background-color: #eef;
  flex: 0 1 auto;
  white-space: nowrap;
}

<div class="container">
  <div class="item">this one is quite long</div>
  <div class="item">short</div>
</div>

button {
  position: relative;
}
button:hover > div {
  background-color: #67BDFF;
}
button:hover > div:before {
  content: "SMURF!";
  position: absolute;
  font-weight: bolder;
  font-size: 20px;
  top: 10px;
}
button > div {
  position: absolute;
  top: 18px;
  left: 0;
  padding: 40px;
}

<button>
  hover over me and my child will turn smurf
  <div>
    i'll remain smurf if you over over me cus am part of my parent, but not in firefox
  </div>
</button>

label.btn span {
  font-size: 16px;
}
i.fa {
  font-size: 24px;
}
i.fa.fa-dot-circle-o {
  font-size: 24px;
}
label input[type="radio"] {
  color: #c8c8c8;
  display: inline;
}
label input[type="radio"] ~ i.fa.fa-dot-circle-o {
  display: none;
}
label input[type="radio"]:checked ~ i.fa.fa-circle-o {
  display: none;
}
label input[type="radio"]:checked ~ i.fa.fa-dot-circle-o {
  color: #78a025;
  display: inline;
  font-size: 24px;
}
label:hover input[type="radio"] ~ i.fa {
  color: #78A025;
}
label input[type="checkbox"] ~ i.fa.fa-square-o {
  color: #c8c8c8;
  display: inline;
}
label input[type="checkbox"] ~ i.fa.fa-check-square-o {
  display: …

.calendar_wrap table {\r\n    width: 100%;\r\n}\r\n.calendar_wrap #wp-calendar thead th {\r\n    font-weight: 500;\r\n    color: #45515a;\r\n    font-size: 20px;\r\n    line-height: 28px;\r\n}\r\n.calendar_wrap #wp-calendar tbody td {\r\n    font-weight: 400;\r\n    font-size: 24px;\r\n    line-height: 36px;\r\n    color: #5b666f;\r\n}\r\n.calendar_wrap #wp-calendar tfoot td a {\r\n    color: #3d9596;\r\n    font-weight: 500;\r\n    margin-top: 10px;\r\n    display: inline-block;\r\n    font-size: 22px;\r\n    line-height: 32px;\r\n}\r\n.calendar_wrap #wp-calendar tbody td a {\r\n    color: #EF9950;\r\n}\r\n.calender-box {\r\n    padding: 15px;\r\n    border: 1px solid #d4d9dd;\r\n    border-radius: 8px;\r\n}\r\ncaption {\r\n    font-size: 30px;\r\n    line-height: 36px;\r\n    color: #007ab0;\r\n}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" …

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
.my-custom-forms {
    font-family: 'Open Sans',serif;
}
select.my-custom-forms, input.my-custom-forms{
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
    border-bottom: 2px solid lightblue;
    padding: .25rem .1rem .25rem .1rem;
    overflow: auto;
    width: 100%;
    background-color: transparent;
    transition: border .5s ease;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container m-3">
  <div class="row">
    <div class="col-3">
      <select class="my-custom-forms">
        <option>Option</option>
      </select>
    </div>
    <div class="col-3">
      <select class="my-custom-forms">
        <option>Option</option>
      </select>
    </div>
    <div class="col-6">
      <input placeholder="text" class="my-custom-forms">
    </div>
  </div>
</div>

|**   *|

.container {
  border: 1px solid red;
  display: flex;
  justify-content: flex-start;
  width: 100%;
  height: 200px;
  flex-direction: row;
}

.container div {
  border: 1px solid blue;
  height: 100px;
  width: 100px;
}

.right {
  display: flex;
  align-self: flex-end;
}

.row {
  width: 300px;
  border: 1px solid black;
  display: flex;
}

.otherstuff {
  flex-grow: 1;
}

.grid {
  display: grid;
  grid-auto-flow: column;
  gap: 10px 10px;
}

.cell {
  border: 1px solid blue;
}

<div class='row'>
  <div class='stuff'>Stuff</div>
  <div class='otherstuff'>
    <div class='grid'>
      <div class='cell'>Cell 1</div>
      <div class='cell'>Cell 2</div>
    </div>
  </div>
</div>

.Block {
  width: 300px;
  margin: auto;
}

.Image {
  width: 150px;
  float: left;
  margin-top: -100px;
}

<div class="Block">
  Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur.
  <br><br>
  Nullam id dolor id nibh ultricies …

/*** Page ***/
html,body {
    margin: 0;
}

/*** Navigation ***/
.navbar {
    background-color: #ecf0f1;
}
.navbar > .main-nav > ul,
li {
    list-style-type: none;
    text-decoration: none;
}
.navbar > .main-nav > ul {
    min-height: 60px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
    border-top: 8px solid #d1d064;
}
.navbar > .main-nav > ul > li {
    text-align: center;
    min-width: 150px;
    position: relative;
    top: -2px;
    display: …