разделение ширины окна для 2 div, разных по ширине

Рейтинг: 0Ответов: 1Опубликовано: 19.04.2023

Необходимо вертикальное меню слева контейнера, а справа от него контент(картинка). Как разделить ширину окна в пропорциях примерно 25/75.

введите сюда описание изображения

css javascript html
Источник: Stack Overflow на русском

Ответы

▲ -1

На "grid" удобней и меньше писать, но если вдруг ".aside" должен менять ширину, схлопываться например, тогда на "flex" лучше делать, так как манипуляции уже будут идти именно с шириной ".aside".

.flex-wrapper {
  display: flex;
  column-gap: 30px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #cecece;
}
.flex-wrapper .aside {
  min-width: 100px;
  
}
.flex-wrapper .content {
  width: 100%;
}
.aside {
  height: 100px;
  background-color: red;
}
.content {
  height: 100px;
  background-color: green;
}
.grid-wrapper {
  display: grid;
  grid-template-columns: 100px auto;
  column-gap: 30px; 
}
<h1>На флексах</h1>
<div class="flex-wrapper">
  <div class="aside"></div>
  <div class="content"></div>
</div>
<h1>На Гридах</h1>
<div class="grid-wrapper">
  <div class="aside"></div>
  <div class="content"></div>
</div>