CSS Float 1

フロートなし。

by rough cheap

HTML

<div class="container">
  <div class="left boxa">
    This is Box A.
  </div>
  <div class="left boxb">
    This is Box B.
  </div>
  <div class="left boxc">
    This is Box C.
  </div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Morbi tristique sapien ac erat tincidunt, sit amet dignissim
    lectus vulputate. Donec id iaculis velit. Aliquam vel
    malesuada erat. Praesent non magna ac massa aliquet tincidunt
    vel in massa. Phasellus feugiat est vel leo finibus congue.
  </p>
</div>

CSS

html {
  font-size: 14px;
}

div {
  box-sizing: border-box;
}

.container {
  padding: 0.5rem;
  background-color: rgb(196, 196, 196);
}

.boxa {
  background-color: rgb(255, 196, 196);
}

.boxb {
  background-color: rgb(196, 255, 196);
}

.boxc {
  background-color: rgb(196, 196, 255);
}

JavaScript

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", function() {
  banner.addClass("alt")
})