HTML Layout Design

Question

Я не разбираюсь в HTML, но мне нужна простая компоновка, как показано ниже в ASP.Net MVC Razor.

Мне нужен HTML / CSS с четырьмя разделами, как показано ниже

1. Div1 с сеткой @ слева заполнена
2. У Div2 есть кнопки @ с правой стороны сверху
3. У Div3 есть решетка @ с правой стороны по центру
4. У Div4 есть решетка @ с правой стороны снизу

Я пробовал нижеПример кода, проблема в том, что левая сторона (Div1) перекрывается с правой стороной, которая не выравнивается правильно.

    <div class="left">
    <div id="div1">
        <p>Some text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3</p> 

    </div>
</div>

<div class="right">
    <div id="div2">
        <p>DIV 2 DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2DIV 2 DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3</p>

    </div>
    <div id="div3">
        <p>DIV 3 DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3DIV 3/p>

    </div>
</div>


<style>
.left {
    float: left;
    width: 50%;
}

.right {
    float: right;
    width: 50%;
}

Answer 1

Реализация flexbox:

.wrapper {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  height: 200px;
}

.col {
  display: flex;
  flex-flow: column nowrap;
  flex: 1 1 0;
  border: 2px solid red;
}

.right {
  flex: 1 1 0;
  border: 2px solid green;
}

<div class="wrapper">
  <div class="col">Left</div>
  <div class="col">
    <div class="right">Right Top</div>
    <div class="right">Right Middle</div>
    <div class="right">Right Bottom</div>
  </div>
</div>

Answer 2

CSS Grid Layout идеально подходит для того, что вам нужно, см. Ниже Я адаптировал этот пример к вашему случаю.

Вы обязательно должны пройти все примерыиз этого сайта сделано Рэйчел Эндрю.

body {
  margin: 40px;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.header {
  grid-area: header;
  display: flex;
}

.header div {
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.footer {
  grid-area: footer;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 50% 50%;
  grid-template-areas: "sidebar header" "sidebar content" "sidebar footer";
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  font-size: 150%;
}

.header,
.footer {
  background-color: #999;
}

<div class="wrapper">
  <div class="box header">
    <div>
      <button>Button 1</button>
      <button>Button 2</button>
      <button>Button 3</button>
    </div>
    <div>
      <button>Button 4</button>
      <button>Button 5</button>
      <button>Button 6</button>
    </div>
    <div>
      <button>Button 7</button>
      <button>Button 8</button>
      <button>Button 9</button>
    </div>
  </div>
  <div class="box sidebar">Sidebar</div>
  <div class="box content">
    <p>Content</p>
    <p>More content than we had before so this column is now quite tall.</p>
  </div>
  <div class="box footer">Footer</div>
</div>

Ресурсы:

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
• https://developer.mozilla.org/en-US/docs/Web/CSS/flex
• https://gridbyexample.com/