Выравнивание блоков Div CSS

#html #css

#HTML #css

Вопрос:

Я хотел бы выровнять div s таким образом, чтобы слева было большое расширяемое поле, подобное тем, которые вы можете видеть, и 2 выравнивающих, один поверх другого справа справа от него

Представьте, что вместо блоков 1 и 3, которые вы видите в написанном мной коде, они должны быть в виде 1 большого блока, а остальные 2 и 4 остаются выровненными по большому блоку.

Я играл с командой flex, но не могу заставить ее работать каждый раз, когда я использую команды flex, она не выравнивается должным образом и становится пирамидой

Если кто-нибудь может мне помочь и объяснить это, я был бы признателен, поскольку я не понимаю, как заставить это работать

 .Scrollbox h1 {
   color: #ffffff !important;     
}
        
.scroll-con {
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
} 

.Scrollbox {
   background: rgba(130, 164, 179,0.6);
   border: 1px solid #ffffff;
   overflow-y: scroll;
   width: 300px;
   height: 250px;
   transition: height 1s ease;
   overflow: hidden;
   text-align: center;
   color: #ffffff;
   font-family: 'Poiret One', cursive; 
}

.Scrollbox:hover {
   height: 500px;
   overflow-y: hidden;
}

 <div class="scroll-con">
  <div class="Scrollbox">1</div>
  <div class="Scrollbox">2</div>
  <div class="Scrollbox">3</div>
  <div class="Scrollbox">4</div>
</div>

Ответ №1:

Насколько я понимаю, вы хотите, чтобы 1 и 3 были одним длинным блоком, а 2 и 4 были 2 отдельными блоками рядом с ним?

Вы можете разделить их на два разных подразделения, где 2 и 4 будут дочерними элементами right div.

 .container {
  display: flex;
}

.container>div {
  flex: 1;
}

.left {
  background: pink;
  min-height: 500px
}

.right {
  display: flex;
  flex-direction: column;
  background: blue;
}

.right>div {
  flex: 1;
}

.right>div:first-child {
  background: yellow;
}

.right>div:last-child {
  background: gold;
}

 <div class="container">
  <div class="left">1 amp;amp; 3</div>
  <div class="right">
    <div>2</div>
    <div>4</div>
  </div>
</div>

В качестве альтернативы вы можете использовать grid для того же.

 .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.left {
  min-height: 500px;
  grid-row-start: 1;
  grid-row-end: 3;
  background-color: pink;
}

.left div {
  background-color: yellow;
}

.left div div {
  background-color: gold;
}

 <div class="container">
  <div class="left">1 amp;amp; 3</div>
  <div>2</div>
  <div>4</div>
</div>

1. Что означает .container> div? Например, что он делает, я не знаком с этим, извините

2. Это > прямой дочерний селектор, который сообщает CSS применить стиль к любому div , который является прямым дочерним элементом .container . Вы можете узнать больше о селекторах здесь ( developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors )