Выравнивание тегов Div в одной строке

Question

Я пытаюсь выстроить эти три элемента div таким образом, чтобы два блока столбца 1 находились с левой стороны друг над другом, а блок столбца 2 находился справа на одном уровне с двумя столбцами одного блока

Я пробовал все виды комбинаций отображения: inline-block / inline и float: left;но я просто не могу заставить эти вещи выстроиться в линию

<div id="wrapper" width="auto">
  <div id="left-container" style="background-color:lightgray;width:10%;line- 
    height:95px;float:left;">
    column1
  </div>
  <div id="left-container" style="background-color:gray;width:10%;line-height:95px;">
    column1
  </div>
  <div id="left-container" style="background-color:lightblue;width:50%;line- 
    height:190px;">
    column2
  </div>
</div>

Любая помощь очень ценится!

Answer 1

Сеточный раствор.Используя grid-template-columns для указания количества и размеров столбцов для каждого столбца, затем используя grid-column и grid-row для указания, где должны быть элементыразмещены.Элемент с классом third занимает две строки:

.wrapper {
  display: grid;
  grid-template-columns: 10% 50%;
}

.column-1 {
  background-color: gray;
}

.column-2 {
  background-color: lightblue;
}

.first {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.second {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.third {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}

<div class="wrapper">
  <div class="column-1 first">
    column1
  </div>
  <div class="column-1 second">
    column1
  </div>
  <div class="column-2 third">
    column2
  </div>
</div>

Answer 2

Я просто пишу базовый пример flexbox.Попробуйте это, я надеюсь, это поможет вам.Спасибо

#wrapper {
  display: flex;
}

#left-container {
  display: flex;
  flex-direction: column;
  width: 100px;
}

#right-container {
  display: flex;
  width: 100px;
}

#left-container div,
#right-container div {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div id="wrapper" width="auto">
  <div id="left-container">
    <div style="background-color: lightgray; height: 20px;">
      column1
    </div>
    <div style="background-color: gray; height: 50px;">
      column1
    </div>
  </div>
  <div id="right-container">
    <div style="background-color: lightblue;">
      column2
    </div>
  </div>
</div>

Answer 3

Если вы готовы поменять элемент, попробуйте следующую структуру.

.left-container {
  float: left
}

.left-container>div {
  background-color: lightgray;
  line-height: 95px;
}

.right-container {
  background-color: lightblue;
  width: 50%;
  line-height: 190px;
  float: right;
}

<div id="wrapper" width="auto">
  <div class="left-container">
    <div>
      column1
    </div>
    <div>
      column1
    </div>
  </div>
  <div class="right-container">
    column2
  </div>
</div>

Мое предложение - попытаться избежать встроенного стиля, создать класс и добавить туда свои стили.в противном случае, если вы зададите стили в элементе inline, перезаписать стиль будет немного сложно.

Answer 4

Как то так?

Вы можете работать с flex.

#wrapper {
  display: flex;
}

.inner-wrapper {
  min-width: 10px;
}

.left-container:nth-of-type(1) {
  background-color: lightgray;
  width: 100%;
  line-height: 95px;
}

.left-container:nth-of-type(2) {
  background-color: gray;
  width: 100%;
  line-height: 95px;
}

.left-container:only-of-type {
  background-color: lightblue;
  width: 100%;
  line-height: 190px;
}

<div id="wrapper" width="auto">

  <div class="inner-wrapper">
    <div class="left-container" style="">
      column1
    </div>
    <div class="left-container" style="">
      column1
    </div>
  </div>
  <div class="inner-wrapper">
    <div class="left-container" style="">
      column2
    </div>
  </div>

</div>

Answer 5

Используйте этот код

CSS

<style>
#wrapper > div{
display:inline-block;
}
</style>