Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

Помогите с выравнивание в css

Александр Корольков Ученик (214), на голосовании 4 недели назад
Есть такой html код:

 





Lorem ipsum dolor sit amet c






И такой css:

 body { 
margin: 30px;
}

.container_fast_video_info {
display: grid;
grid-template-areas:
'video_container movie_info_container'
'video_container button_movie';
}

.video_container {
grid-area: video_container;
}

.movie_info_container {
grid-area: movie_info_container;
background-color: rgb(27, 17, 223);
}

.button_movie {
grid-area: button_movie;
background-color: brown;
}
Почему тут появился отступ ?

(Помогите пельмешку, пожалуйста)
Голосование за лучший ответ
AaacoB Aaac Мудрец (13638) 1 месяц назад
да ты 3айёп, дятел... ты бы хоть пару первых уроков по верстке прочитал, прежде, чем сопли тут пускать!
V̲i̲s̲t̲a̲s̲t̲e̲r̲ Искусственный Интеллект (261381) 1 месяц назад
потому что рисунок у тебя от другого кода, у тебя видео с кнопкой Яндекса, а значит оно встроено во фрейм.
Александр КорольковУченик (214) 1 месяц назад
Там размеры video_container и video отличаются, поэтому там, где был отступ, это был просто невидимый video_container. Почему я не посмотрел элементы на странице, нуу ¯\_(ツ)_/¯

Но проблема остается, как можно сделать, чтобы video_container подстраивался под размер video, использовать area: ?
 надо убрать

 

Lorem ipsum dolor sit amet c

Александр КорольковУченик (214) 1 месяц назад
Каким образом убрать
<p>Lorem ipsum dolor sit amet c</p> поможет ?
 отвечать
мне нужно
а ты
ответил
другому

я убрал
и на скриншоте вот так 
Александр КорольковУченик (214) 1 месяц назад
Есть такой код в html
 





Lorem ipsum dolor sit amet consectetur, adipisicing elit. In ducimus magni reprehenderit minus blanditiis repellat tenetur. Ducimus et doloremque tenetur adipisci dolores iste nemo, velit qui incidunt tempora consequatur dolorum!






 а нужен
вот
такой код 
 
Александр КорольковУченик (214) 1 месяц назад
Нет, сейчас ещё объясню.
 в стилях
css
убери

margin: 0px;  
Александр КорольковУченик (214) 1 месяц назад
И такой в css





body {
margin: 30px;
}

.container_fast_video_info {
display: grid;
grid-template-areas:
'video_container movie_info_container'
'video_container button_movie';
grid-template-rows: 3fr 0.5fr;
grid-gap: 30px;
}


.video_container {
grid-area: video_container;
background-color: rgb(255, 255, 255);
}


.video {
height: 500px;
}


.movie_info_container {
grid-area: movie_info_container;
background-color: rgb(27, 17, 223);
}



.button_movie {
grid-area: button_movie;
background-color: brown;
}
Александр КорольковУченик (214) 1 месяц назад
Смысл в том, что у меня есть видео высотой 500px, он автоматически делает ему ширину, и мои movie_info_container и button_movie должны выравниваться высотой по размеру video.







(Для наглядности в html можно убрать video_container,в css удалить video_container и в video добавить grid-area: video_container;

Тогда всё будет красиво, как мне и надо, но в этом примере нету обёртки video_container.)
Александр КорольковУченик (214) 1 месяц назад
Скинь свой код
Похожие вопросы