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

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

Александр Корольков Ученик (229), на голосовании 1 месяц назад
Есть такой 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 Мудрец (14161) 2 месяца назад
да ты 3айёп, дятел... ты бы хоть пару первых уроков по верстке прочитал, прежде, чем сопли тут пускать!
V̲i̲s̲t̲a̲s̲t̲e̲r̲ Искусственный Интеллект (263772) 2 месяца назад
потому что рисунок у тебя от другого кода, у тебя видео с кнопкой Яндекса, а значит оно встроено во фрейм.
Александр КорольковУченик (229) 2 месяца назад
Там размеры video_container и video отличаются, поэтому там, где был отступ, это был просто невидимый video_container. Почему я не посмотрел элементы на странице, нуу ¯\_(ツ)_/¯

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

 

Lorem ipsum dolor sit amet c

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

я убрал
и на скриншоте вот так 
Александр КорольковУченик (229) 2 месяца назад
Есть такой код в 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!






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

margin: 0px;  
Александр КорольковУченик (229) 2 месяца назад
И такой в 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;
}
Александр КорольковУченик (229) 2 месяца назад
Смысл в том, что у меня есть видео высотой 500px, он автоматически делает ему ширину, и мои movie_info_container и button_movie должны выравниваться высотой по размеру video.







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

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