0

Насколько корректно указана ширина и высота элементов?

https://codepen.io/Krutov/pen/ZrdQeE

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

body{
    height: 100%;
    min-height: 100vh;
    background-color: aqua;
    padding: 20px;
    color: blue;
    font-family: fantasy;
    font-size: 50px;
}

.wraper{
    border: 3px solid black;
    background-color: bisque;
    width: 100%;
    max-width: 1300px;
    padding: 10px;
    margin: 0 auto;
}

.header{
    background-color: red;
    width: 100%;
    border: 2px solid gold;
    margin-bottom: 10px;
}

.left{
    border: 2px solid green;
    width: 200px;
    max-width: 100%;
    float: left;
    margin-right: 180px;
}

.center{
    border: 2px solid blue;
    width: 500px;
    max-width: 100%;
    float: left;
}

.right{
    border: 2px solid black;
    width: 200px;
    max-width: 100%;
    float: right;
}

.footer{
    background-color: red;
    width: 100%;
    border: 2px solid orange;
    margin-top: 10px;
}

.clearfix:after{
    content: "";
    display: block;
    clear: both;
}

.text_style{
    padding: 10px;
    text-align: center;
}
<main class="wraper">

<header class="header text_style">header</header>

    <content class="clearfix">

<aside class="left text_style">left</aside>

<aside class="center text_style">center</aside>

<aside class="right text_style">right</aside>

    </content>

<footer class="footer text_style">footer</footer>

</main>

7
  • 1
    Вероятно, нет...
    – Qwertiy
    5 мар 2018 в 21:48
  • Что необходимо исправить?
    – Max Krutov
    5 мар 2018 в 21:51
  • 1
    А откуда я знаю?
    – Qwertiy
    5 мар 2018 в 21:52
  • И с чего возникла идея footer c header-ом сунуть в main?
    – Air
    5 мар 2018 в 22:00
  • А что касается ширины и высоты, это сугубо твое личное дело... кому знать как не тебе правильно или нет...
    – Air
    5 мар 2018 в 22:01

1 ответ 1

0

Мне кажется так правильно ...

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

body {
  height: 100%;
  min-height: 100vh;
  background-color: aqua;
  padding: 20px;
  color: blue;
  font-family: fantasy;
  font-size: 50px;
}

.wraper {
  border: 3px solid black;
  background-color: bisque;
  width: 100%;
  max-width: 1300px;
  padding: 10px;
  margin: 0 auto;
}

.header {
  background-color: red;
  width: 100%;
  border: 2px solid gold;
  margin-bottom: 10px;
}

.content {
  display: flex;
  flex-direction: row;
}

.left {
  border: 2px solid green;
  width: 100%;
}

.center {
  border: 2px solid blue;
  width: 100%;
}

.right {
  border: 2px solid black;
  width: 100%;
}

.footer {
  background-color: red;
  width: 100%;
  border: 2px solid orange;
  margin-top: 10px;
}

.text_style {
  padding: 10px;
  text-align: center;
}

@media screen and (max-width:800px) {
  .content {
    flex-direction: column;
  }
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<main class="wraper">

  <header class="header text_style">header</header>

  <div class="content">

    <aside class="left text_style item">left</aside>

    <aside class="center text_style item">center</aside>

    <aside class="right text_style item">right</aside>

  </div>

  <footer class="footer text_style">footer</footer>

</main>

4
  • и если заметите что в мобильную версию 1 строчкой переделывается
    – user33274
    5 мар 2018 в 23:09
  • Да! Спасибо Вам, так видимо правильнее всего!
    – Max Krutov
    6 мар 2018 в 4:59
  • @MaxKrutov Отметьте ответ как принятый (зелёная галочка слева от ответа) если он вам помог. 6 мар 2018 в 13:52
  • Да, конечно с радостью!
    – Max Krutov
    6 мар 2018 в 14:19

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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