Poszukiwanie opinii o mojej realizacji tasku

Question

Witam, niedawno przepracowałem zadanie domowe ze strony Pasja informatyki do odcinku "Float left vs. Display inline-block. Technik informatyk. Egzamin EE.09 / E.14". Zadanie polega na utworzeniu layoutu na podstawie schematu używając samych float: left. Zadanie ukończyłem i bardzo bym chciał usłyszeć opinię o sposobie realizowania zadania i użytych przez mnie metod i sposobów. Zastanawiam się czy wybrałem najlepsze możliwe opcje.
Link do GitHub : https://github.com/LIIK0/HomeWorkFloatLeft
Za oddany czas na podgląd i dyskusje bardzo dziękuje.

Answer 1

Z treści zadania wynika, że ma to wyglądać mniej więcej tak

dalej dowiadujemy się, że

Uwaga: odstępy widoczne na schemacie są jedynie umowne (mają obrazować wzajemne położenie bloków) – w praktyce divy powinny być przyklejone do siebie bez żadnych odstępów.

czyli np. IMO coś w tym stylu (kolory dodane dla prezentacji)

a Twoja propozycja pokazuje mi się mniej więcej tak

bez urazy, więc popatrz na obrazki powyżej i sam sobie odpowiedz.

 

 

Moja interpretacja

<div class="container">
  <div class="box1"></div>

  <div class="box2 float-left"></div>
  <div class="box3 float-left"></div>

  <div class="box4 float-left">
    <div class="box4a float-left"></div>
    <div class="box4b float-left"></div>
    <div class="box4c float-left"></div>
  </div>
  <div class="box5 float-left"></div>

  <div class="box6 float-left"></div>
  <div class="box7 float-left"></div>
  <div class="box8 float-left"></div>

  <div class="box9 float-left"></div>
  <div class="box10 float-left"></div>
  <div class="float-clear"></div>
</div>

.container {
  width: 600px;
  height: auto;
  margin: 0 auto;
  border: 0;
}
.box1 {
  height: 70px;
}
.box2 {
  width: 400px;
  height: 70px;
}
.box3 {
  width: 200px;
  height: 70px;
}
.box4 {
  width: 400px;
  height: 170px;
}
.box4a,
.box4b {
  width: 50%;
  height: 100px;  
}
.box4c {
  width: 100%;
  height: 70px;
}
.box5 {
  width: 200px;
  height: 170px;
}
.box6,
.box7,
.box8 {
  width: 200px;
  height: 100px;  
}
.box9,
.box10 {
  width: 50%;
  height: 70px;
}
.float-left {
  float: left;
}
.float-clear {
  clear: both;
}



/* dla prezentacji */
.box1 {
  background-color: #FFC0CB;
}
.box2 {
  background-color: #9370DB;
}
.box3 {
  background-color: #6A5ACD;
}
.box4a {
  background-color: #66BDAA;
}
.box4b {
  background-color: #66DDAA;
}
.box4c {
  background-color: #66FDAA;
}
.box5 {
  background-color: #8BD513;
}
.box6 {
  background-color: #FFA500;
}
.box7 {
  background-color: #FFC500;
}
.box8 {
  background-color: #FFE500; 
}
.box9 {  
  background-color: #CD5C5C;
}
.box10 {  
  background-color: #CD7C5C;
}

.container {  
  padding: 4px;
  background-image: 
    linear-gradient(
      to bottom, 
      #FFC0CB, #9370DB, #66BDAA,
      #8BD513, #FFA500, #CD7C5C
    );
}
.container div {
  position: relative;
}
.container div:not(.float-clear)::before {
  content: attr(class);
  position: absolute;
  top: .25rem; left: .25rem;
  font: 300 .7rem/1 system-ui, monospace;
  padding: .25rem .4rem;
  background-color: rgba(0,0,0,.55);
  color: white;
  word-spacing: .25rem;
}

 

Comments

Cześć, dzięki ci za twoją odpowiedz, zauważyłem że odstępy nie są wymagane, czyli sam sobie w sumie utrudniłem zadanie. Widzę że fajnie było by go ponownie zrobić. Widać że twoja realizacja jest uporządkowana i zawiera prostsze sposoby do zrealizowania zadania. Fajnie, że dzięki twojemu przykładu mam nad czym się zastanowić. Dziękuję ci bardzo!