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

Курсы Сетки
23

Мой код на 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;
}

24

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;
}
1 лайк
25

Вот код, который можно использовать, выполнено на 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;
}
1 лайк
26

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

27

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

Вот решение на 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;
}
28

Спасибо. 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;
}

29

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;
}

30 
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

31

результат 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;
}

32

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

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;
}

33

Решение на 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;
}