HTML 布局设计

Question

我不熟悉 HTML，但我需要在 ASP.Net MVC Razor 中进行如下简单布局。

我需要如下 4 个部分的 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

弹性盒实现：

.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 非常适合您的需求，请参见下文，我已根据您的情况调整了 this example。

您绝对应该阅读 Rachel Andrew 完成的所有 this website 示例。

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/