2

body {
  margin: 0;
  height: 100%;
}

header {
  background-color: yellow;
}

.green {
  background-color: green;
  width: 50%;
  float: left;
}

.blue {
  background-color: blue;
  width: 50%;
  float: right;
}

.orange {
  background-color: orange;
  float: left;
  width: 33.333%;
}

.red {
  background-color: red;
  float: left;
  width: 33.333%;
}

.violet {
  background-color: darkmagenta;
  float: left;
  width: 33.333%;
}

.clear {
  clear: both;
}

footer {
  clear: both;
  background-color: cyan;
}
<body>
  <header>0</header>
  <div class="green">1</div>
  <div class="blue">2</div>
  <div class="orange">3</div>
  <div class="violet">4</div>
  <div class="red">5</div>
  <footer>5+1</footer>

1
  • <body> <header></header> ````<div class="green"></div> <div class="blue"></div> <div class="orange"></div> <div class="violet"></div> <div class="red"></div> <footer></footer> 28 авг 2020 в 18:17

2 ответа 2

0

Блокам не задана высота. Надо либо вписать в каждый блок текст, либо задать высоту блокам

.green{
    background-color:green; 
    width:50%;
    float:left;
    height: 5em;
}
.blue{
    background-color:blue;
    width:50%;
    float:right;
    height: 5em;
}
.orange{
    background-color:orange;
    float:left;
    width:33.333%;
    height: 5em;
}
.red{
    background-color:red;
    float:left;
    width:33.333%;
    height: 5em;
} 
.violet{
   background-color:darkmagenta;
   float:left;
   width:33.333%;
   height: 5em;
}
footer{
    clear:both;
    background-color:cyan;
    height: 5em;
}
<header></header>
<div class="green"></div>
<div class="blue"></div>
<div class="orange"></div>
<div class="violet"></div>
<div class="red"></div> 
<footer></footer>

1
  • Цветные блоки должны занимать всю площадь окна, т.е. viewport’a 29 авг 2020 в 7:43
0

так?

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

.green{
    position: absolute;
    height: 33.333%;
    background-color:green; 
    width: 50%;
    top: 0;
}
.blue{
    background-color:blue;
    width: 50%;
    top: 0;
    right: 0;
    position: absolute;
    height: 33.333%;
}
.orange{
    background-color:orange;
    top: 33.333%;
    width: 33.333%;
    position: absolute;
    height: 33.333%;
}
.red{
    background-color:red;
    top: 33.333%;
    left: 33.333%;
    width: 33.333%;
    position: absolute;
    height: 33.333%;
} 
.violet{
    background-color:darkmagenta;
    top: 33.333%;
    right: 0;
    width: 33.333%;
    position: absolute;
    height: 33.333%;
}
footer{
    top: 66.666%;
    background-color:cyan;
    position: absolute;
    height: 33.333%;
    width: 100%;
}
<header></header>
<div class="green"></div>
<div class="blue"></div>
<div class="orange"></div>
<div class="violet"></div>
<div class="red"></div> 
<footer></footer>

1
  • все, получилось!) спасибо! 29 авг 2020 в 8:51

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.