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

maxinflame · 11.01.2021 19:07:22

body {
margin: 0;
}

ul {
margin: 0 auto;
display: flex;
justify-content: center;
width: 320px;
padding: 10px;
padding-top: 20px;
padding-bottom: 40px;
}

.door {
width: 100px;
}

li.door-1 {
margin-right: auto;

}

li.door-3 {
margin-left: auto;

}

.container {
display: flex;
width: 550px;
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: 100px;
margin-left: auto;
margin-top: auto;
}

Не могу понять почему всё кроме подвала съезжает чуть влево

Regulus · 12.01.2021 06:24:51

Все дело в том, что padding увеличивает размер контейнера, а margin нет.

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

Wimaks · 12.01.2021 09:33:45

Мой вариант на 92.4%. Не понимаю, что нужно сделать, чтобы справа увеличился размер

Сетки. Двери. Задача

body {
margin: 0;
}

ul {
margin: 0;
}

.header-title {
margin-left: 5px;
}

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

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

.door {
width: 100px;
}

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

.note-1 {
width: 150px;
}

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

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

maxinflame · 12.01.2021 11:10:04

Сработало, спасибо

Zetter · 12.01.2021 17:54:19

Код на 100%. Можете сравнить и найти у себя ошибки.
Навскидку попробуйте поменять “justify-content: space-between;” на “center”

body {
 margin: 0;
}

ul {
 margin: 0;
}

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

.door {
  margin: 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 {
  margin-left: auto;
  margin-top: auto;
  width: 100px;
}

Tango · 12.01.2021 18:45:02

Только так у меня получилось пройти на 100%
width: 561px!!! 561, Карл!))))
и
padding-right: 4px; 4!!! А почему бы собственно и нет?)))

body {
width: 561px;
margin: 0;
}

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

.door {
width: 100px;
}

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

.container {
display: flex;
padding: 5px;
padding-right: 4px;
}

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

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

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

Wimaks · 12.01.2021 19:45:21

Сравнил твой код со своим и нашел ошибку - в футере получается вместо padding написал margin и все съехало у меня из-за этого.

Вот тоже 100% со space-between.

body {
margin: 0;
}

ul {
margin: 0;
}

/*.header-title {
margin-left: 5px;
}

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

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

.door {
width: 100px;
}

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

.note-1 {
width: 150px;
}

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

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

И подскажи, как так красиво код вставляешь

Zetter · 13.01.2021 10:23:49

По вставке кода - перед каждой строчкой 4 пробела нужно поставить, тогда он в такой блок будет выноситься построчно. Запарочно, даже через CTRL-C + CTRL-V, но как по мне стоит того, код более читабелен.

d4chugay · 15.01.2021 22:03:16

body {
margin:0;
}

ul {
margin:0;
}

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

.door {
width: 100px;
}

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

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

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

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

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

RZX83 · 15.01.2021 22:57:39

Вы можете смело избавиться от лишних:

.door {
margin: auto;
}

И удалить в door-list

justify-content: center;

в нем нет смысла, так как вы с помощью margin уже установили отступы для door-1 и door-2.
Надо что-то одно Но если через justify-content, тогда значение должно быть space-between, а не center

RZX83 · 15.01.2021 22:48:16

body, ul {
  margin: 0;
}

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

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

Mr.Noob · 09.02.2021 08:31:45

body {
margin: 0;
}

ul {
margin: 0;
}

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

.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-left: auto;
margin-top: auto;
}

AlexB · 10.02.2021 15:55:42

Такая же ситуация! Час не мог понять в чём ошибка и только сейчас понял. Спасибо за ответ!
Всё из-за ширины и отступа.

konstuanotop · 10.02.2021 16:06:18

Мой вариант 100%

body {
margin: 0;
}

ul {
display: flex;
margin: 0;
justify-content: space-between;
width: 320px;
padding: 10px;
padding-top: 20px;
padding-bottom: 40px;
}

.doors-list {
width: 320px;
margin: 0 auto;
}

li {
width: 100px;
}

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

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

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

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

Mephisto · 27.02.2021 11:22:08

Как получилось у меня 100%.)
body, ul{
margin: 0;
}
.doors-list {
width: 330px;
display: flex;
justify-content:center;
padding-top: 20px;
padding-bottom: 40px;
padding-left: 10px;
padding-right: 10px;
margin: auto;
}

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

}

.container {
display: flex;
justify-content: space-between;
width: 550px;
padding: 5px;
}
.note-1 {
width: 150px;

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

}

Flor · 23.03.2021 20:52:40

100% Короче кода не смог придумать (из того что прошли).

body {
margin: 0;
}

ul {
margin: 0;
}

.doors-list {
display: flex;
justify-content: center;

padding-top: 20px;
padding-right: 10px;
padding-bottom: 40px;
padding-left: 10px;
}

.door {
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 {
width: 200px;
margin-top: auto;
margin-bottom: auto;
}

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

Andrey5 · 05.04.2021 08:54:06

Вот мой вариант. Прохождение 100%.

body {
margin: 0;
}

ul {
margin: 0;
}

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

.door {
width: 100px;
}

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

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

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

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

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

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

Ni_na · 05.04.2021 13:44:29

body,ul{
margin:0;
}
.doors-list{
width:320px;
margin:0 auto;
padding:20px 10px 40px;
display:flex;
column-gap:10px;
}
.door{
width:100px;
}
.door:not(:last-of-type){
margin-right:10px;
}
.container{
display:flex;
padding:5px;
width:550px;
}
.note-1{
width:150px;
margin-right:25px;
}
.note-2{
width:200px;
margin:auto 0;
}
.note-3{
width:100px;
margin:auto 0 0 auto;
}

Linn · 01.05.2021 17:23:46

body {
margin: 0;
}

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

.door {
width: 100px;
}

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

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

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

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

realcheg · 27.05.2021 11:54:20

Вот такой код получился, единственное что взял по больше ширину списка 330px; А так вроде костылей нет, результат 100.
xD

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

.doors-list{
margin: 0 auto;
padding: 20px 10px 40px 10px;
width: 330px;
display: flex;
justify-content: center;
}
.door{
width: 100px;
}
.door-2 {
margin: 0 10px;
}
.container{
padding: 5px;
display: flex;
margin: 0 auto;
width: 550px;
}
.note-1{
width: 150px;
margin-right: 25px;
}

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

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