html - 如何在列和行中正确拆分 div

Question

我需要用这种方式创建一个div结构:

这是我所做的:

body {
  background-color: #e9e9e9;
}
p {
  margin: 0
}
#all {
  background: black;
}
#left {
  float: left;
  padding: 5px;
  background: blue;
  width: 200px;
}
#leftUp {
  opacity: 0.8;
  background-color: pink;
  width: 100%;
  height: 50%;
  padding: 5px;
}
#leftDown {
  opacity: 0.8;
  background-color: indigo;
  width: 100%;
  height: 50%;
  padding: 5px;
}
#center {
  display: inline-block;
  padding: 5px;
  background: red;
  width: 620px;
}
#centerUp {
  opacity: 0.8;
  background-color: orange;
  width: 100%;
}
#centerDown {
  opacity: 0.8;
  background-color: yellow;
  width: 620px;
  height: 620px;
}
#right {
  float: right;
  padding: 5px;
  background: green;
}
#rightUp {
  opacity: 0.8;
  background-color: #9ACD32;
  width: 100%;
  height: 50%;
}
#rightDown {
  opacity: 0.8;
  background-color: #00FF00;
  width: 100%;
  height: 50%;
}

<div id="all">

  <div id="left">
    <div id="leftUp">
      <div id="selector">
        <form id="abcd">
          <input type="radio" name="ab" value="Bringing Down the House" checked>Bringing Down the House
          <br>
          <input type="radio" name="ab" value="Metropolis">Metropolis
          <br>
          <input type="radio" name="ab" value="Fight Club">Fight Club
          <br>
          <input type="radio" name="ab" value="Ciclope Festival">Ciclope Festival 2014
          <br>
          <input type="radio" name="ab" value="The Long Kiss Goodnight">The Long Kiss Goodnight
          <br>
          <input type="radio" name="ab" value="Date Night">Date Night
          <br>
          <input type="radio" name="ab" value="The Slums of Beverly Hills">The Slums of Beverly Hills
        </form>
      </div>
    </div>
    <div id="leftDown">
      <p>Hi, I'm leftDown, hi, I'm leftDown, hi, I'm leftDown, hi, I'm leftDown, hi, I'm leftDown, hi, I'm leftDown</p>
    </div>
  </div>

  <div id="center">
    <div id="centerUp">
      <p>Hi, I'm centerUp</p>
    </div>
    <div id="centerDown" with="620px" heigth="620px">
      <p>Hi, I'm centerDown</p>
    </div>
  </div>

  <div id="right">
    <div id="rightUp">
      <p>Hi, I'm rightUp</p>
    </div>
    <div id="rightDown">
      <p>Hi, I'm rightDown</p>
    </div>
  </div>
</div>

JSfiddle here

我得到的与我想要的不同。为什么？我该如何解决？

如果可能的话，我想保留所有这些div，因为我需要它们(我需要添加一些信息)。

Answer 1

你可以叠瓦式 flex 盒子:

body {
  background-color: #e9e9e9;
}
p {
  margin: 0
}
#all {
  background: black;
  display: flex;
  margin: auto;
  max-width: 1200px;
  min-height: 80vh;
  /* demo purpose to show element stretch behavior */
}
#left {
  display: flex;
  flex-flow: column;
  padding: 5px;
  background: blue;
  width: 200px;
}
#leftUp {
  opacity: 0.8;
  background-color: pink;
  flex: 1;
  padding: 5px;
}
#leftDown {
  opacity: 0.8;
  background-color: indigo;
  flex: 1;
  ;
  padding: 5px;
}
#center {
  flex: 1;
  display: flex;
  flex-flow: column;
  padding: 5px;
  background: red;
}
#centerUp {
  background-color: orange;
}
#centerDown {
  opacity: 0.8;
  background-color: yellow;
  flex: 1;
}
#right {
  display: flex;
  flex-flow: column;
  padding: 5px;
  background: green;
  width: 200px;
}
#rightUp {
  opacity: 0.8;
  background-color: #9ACD32;
  flex: 1;
}
#rightDown {
  opacity: 0.8;
  background-color: #00FF00;
  flex: 1;
}

<div id="all">

  <div id="left">
    <div id="leftUp">
      <div id="selector">
        <form id="abcd">
          <input type="radio" name="ab" value="Bringing Down the House" checked>Bringing Down the House
          <br>
          <input type="radio" name="ab" value="Metropolis">Metropolis
          <br>
          <input type="radio" name="ab" value="Fight Club">Fight Club
          <br>
          <input type="radio" name="ab" value="Ciclope Festival">Ciclope Festival 2014
          <br>
          <input type="radio" name="ab" value="The Long Kiss Goodnight">The Long Kiss Goodnight
          <br>
          <input type="radio" name="ab" value="Date Night">Date Night
          <br>
          <input type="radio" name="ab" value="The Slums of Beverly Hills">The Slums of Beverly Hills
        </form>
      </div>
    </div>
    <div id="leftDown">
      <p>Hi, I'm leftDown, hi, I'm leftDown, hi, I'm leftDown, hi, I'm leftDown, hi, I'm leftDown, hi, I'm leftDown</p>
    </div>
  </div>

  <div id="center">
    <div id="centerUp">
      <p>Hi, I'm centerUp</p>
    </div>
    <div id="centerDown">
      <p>Hi, I'm centerDown</p>
    </div>
  </div>

  <div id="right">
    <div id="rightUp">
      <p>Hi, I'm rightUp</p>
    </div>
    <div id="rightDown">
      <p>Hi, I'm rightDown</p>
    </div>
  </div>
</div>