Испытание волшебная дверь

NataliTashe · 13.Июнь.2021 13:09:18

Мой код на 100%, без указания ширины списка контейнера с дверьми

body ,
ul {
margin: 0;
}

.doors-list {
display: flex;
justify-content: center;
padding: 20px 10px 40px 10px;
}

.door {
width: 100px;
}

.door-2 {
margin: 0 10px;
}

.container {
display: flex;
margin: 0 auto;
width: 550px;
padding: 5px;
}

.note-1 {
width: 150px;
margin-right: 25px;
}

.note-2 {
width: 200px;
margin: auto 0;
}

.note-3 {
width: 100px;
margin-top: auto;
margin-left: auto;
}

Dimon12321 · 18.Сентябрь.2021 15:47:11

96,5%. Понятия не имею, почему текст и одна из картинок на пару пикселей не совпадает (см. скрин).

body, ul {
  margin: 0;
}

.doors-list {
  display: flex;
  justify-content: center;
  column-gap: 10px;
  padding-top: 20px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 40px;
}

.door {
  width: 100px;
}

.page-footer {
  width: 550px;
  padding: 5px;
}

.container {
  display: flex;
}

.note-1 {
  width: 150px;
  margin-right: 25px;
}

.note-2 {
  width: 200px;
  margin-top: auto;
  margin-bottom: auto;
}

.note-3 {
  width: 100px;
  margin-top: auto;
  margin-left: auto;
}

Gartonot · 22.Сентябрь.2021 14:20:53

Вот код, который можно использовать, выполнено на 100%

Прежде чем использовать, погуглите, что означают те или иные свойства, чтоб понимать, а не просто скопипастить ради прохождения!)

body, ul {
  margin: 0;
  padding: 0;
} 

.doors-list {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  column-gap: 10px;
  width: 320px;
  margin: 0 auto;
  padding: 20px 10px 40px;
}

.page-footer {
  width: 100%;  
}

.container {
  width: 550px;
  padding: 5px;
  display: flex;
}

.note-1 {
  width: 150px;
  margin-right: 25px;
}

.note-2 {
  width: 200px;
  margin: auto 0;  
}

.note-3 {
  width: 100px;
  margin-top: auto;
  margin-left: auto;
}

lamanwolf · 09.Октябрь.2021 10:21:04

если я правильно понял то в данном задании нужно справится без использования grid

Gartonot · 09.Октябрь.2021 23:42:45

Да, пожалуй ты прав

Вот решение на flex:

body {
  margin: 0;  
}

.doors-list {
  display: flex;
  row-gap: 10px;
  width: 320px;
  margin: 0 auto;
  padding: 20px 10px 40px;
}

.door {
  width: 100px;
}

.door-2 {
  margin: 0 10px;  
}

.container {
  display: flex;
  width: 550px;
  padding: 5px;
}

.note-1 {
  width: 150px;
  margin-right: 25px;
}

.note-2 {
  width: 200px;
  align-self: center;
}

.note-3 {
  width: 100px;
  margin: auto 0 0 auto;
}

tema96 · 27.Октябрь.2021 13:28:53

Спасибо. 100% но у меня получилось без justify-content: center; и .door {
margin: auto;
}

body{
margin:0;
}

ul{
margin:0;
}

.doors-list{
display:flex;
width:320px;
padding:20px 10px 40px;
margin:0 auto;
}

.door-1{
width:100px;
margin-right:10px;
}

.door-2{
width:100px;
margin-right:10px;
}

.door-3{
width:100px;
}

.container{
display:flex;
width:550px;
padding:5px;
}

.note-1{
width:150px;
margin-right:25px;
}

.note-2{
width:200px;
margin-top:auto;
margin-bottom:auto;
}

.note-3{
width:100px;
margin-top:auto;
margin-left:auto;
}

ZiloK45 · 20.Январь.2022 18:05:37

body{
margin:0;
}
.doors-list{
display: flex;
margin: 0 auto;
width: 320px;
padding: 20px 10px 40px 10px;

}
.door{
width: 100px;
}
.door-1{
margin-right: 10px;
}
.door-2{
margin-right: 10px;
}
.container{
width: 550px;
padding: 5px;
display:flex;
}
.note-1{
width:150px;
margin-right:25px;
}
.note-2{
width:200px;
margin-top:auto;
margin-bottom: auto;
}
.note-3{
width:100px;
margin-top: auto;
margin-left: auto;
}

Kuzmenenkova · 06.Февраль.2022 18:06:05

body, ul {
  margin: 0;
  padding: 0;
}

.doors-list {
  width: 320px;
  margin: 0 auto;
  padding: 20px 10px 40px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.door {
  width: 100px;
}

.container {
  padding: 5px;
  width: 550px;  
  display: flex;
}

.note-1 {
  width: 150px;
  margin-right: 25px;
}

.note-2 {
  width: 200px;
  margin: auto 0;
}

.note-3 {
  width: 100px;
  margin: auto 0 0 auto;
}

Получается из-за padding в container, его ширина 550px + 10px

olgamerani · 21.Май.2022 15:55:22

результат 100%

body {
margin: 0;
}
ul {
margin: 0;
}

.header-title {

}

.page-main {
margin-left: 5px;
}

.doors-list {
display: flex;
justify-content: center;
width: 320px;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
padding-left: 10px;
padding-bottom: 40px;
padding-right: 15px;
}

.door {
width: 100px;

}

.door-1 {
margin-right: auto;

}

.door-3 {
margin-left: auto;

}

.container {
display: flex;
width: 555px;
margin: 5px;
}

.note-1 {
width: 150px;
margin-right: 25px;
}

.note-2 {
width: 200px;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}

.note-3 {
width: 110px;
margin-left: auto;
margin-top: 20px;
}

gzhegozh · 01.Июль.2022 10:02:02

Обнулить нужно еще и пэддинги:

body, ul {
padding: 0;
margin: 0;
}

.doors-list {
width: 320px;
display: flex;
justify-content: space-between;
padding: 20px 10px 40px;
margin: auto;
}

.door {
width: 100px;
}

.container {
width: 550px;
display: flex;
padding: 5px;
margin: 0 auto;
}

.note-1 {
width: 150px;
margin-right: 25px;
}

.note-2 {
width: 200px;
margin: auto 0 auto;
}

.note-3 {
width: 100px;
margin: auto 0 0 auto;
}

DmZhuravlev · 08.Ноябрь.2022 19:59:04

Решение на 08/11/2022.
Есть предположения что код кривой, но все же. Если кто читает тему - прошу прокомментировать мой код.

body, ul {
 margin: 0;
}
.doors-list {
 display: flex; 
 width: 320px;
 justify-content:space-between;
 margin:auto;
 padding: 20px 10px 40px;
 }
.door {
  width: 100px;
}
.container {
 width:550px; 
 display: flex;
 padding: 5px; 
}
.note-1 {
  width: 150px;
  margin-right: 25px;
}
.note-2 {
  width: 200px;
  padding-top: 10px
  }
.note-3 {
  width: 100px;
  margin: auto 0 0 auto;
}

KtK · 21.Ноябрь.2024 17:45:13

так это же на гридах, а тема была на флекс-боксах, так то можно ивратится и без гридов и и фб написать

KtK · 21.Ноябрь.2024 17:54:18

мой ответ на 100%:

body {
  margin: 0;
  }

  ul {
    margin: 0;
    }

    .doors-list {
      display: flex;
      justify-content: center;
      width: 320px;
      margin: 0 auto;
      padding: 20px 10px 40px;
      }

      .door {
        margin: auto;
        width: 100px;
        }

      .door-1 {
        margin-right: 10px;
        }

      .door-2 {
        margin-right: 10px;
        }

    .container {
      display: flex;
      width: 550px;
      padding: 5px;
      }

      .note-1 {
        width: 150px;
        margin-right: 25px;
        }
  
      .note-2 {
        margin-top: auto;
        margin-bottom: auto;
        width: 200px;
        }
    
      .note-3 {
        margin-top: auto;
        margin-left: auto;
        width: 100px;
        }