如何在列和行

时间：2016-06-18 18:36:20

标签： html css

我需要创建一个以这种方式制作的div结构：

enter image description here

这就是我所做的：

＆＃13;
＆＃13; 
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%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

JSfiddle here

我所获得的与我所喜欢的不同。为什么？我该如何解决？

如果可能的话，我想保留所有divs，因为我需要它们（我需要添加一些信息）。

4 个答案:

答案 0 :(得分：3)

你可以叠加弹性盒子：

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>

答案 1 :(得分：2)

您可以使用flexbox

来实现此目的

请注意，我稍微调整了您的代码，例如，在CSS中删除了float:left，删除了已弃用的width / height HTML标记，并删除了重复的属性，加入了一条规则

＆＃13;
＆＃13; 
*,
*::before,
*::after {
  box-sizing: border-box
}
body {
  background-color: #e9e9e9;
}
p {
  margin: 0
}
#all {
  background: black;
  display: flex
}
#left {
  padding: 5px;
  background: blue;
  flex: 1
}
#leftUp,
#leftDown {
  opacity: 0.8;
  width: 100%;
  height: 50%;
  padding: 5px;
}
#leftUp {
  background-color: pink;
}
#leftDown {
  background-color: indigo;
}
#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;
  height: calc(100% - 20px)
}
#right {
  padding: 5px;
  background: green;
  flex: 1
}
#rightUp,
#rightDown {
  opacity: 0.8;
  width: 100%;
  height: 50%;
}
#rightUp {
  background-color: #9ACD32;
}
#rightDown {
  background-color: #00FF00;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

如果您不关心内容层次结构：

＆＃13;
＆＃13; 
body {
				background-color: #e9e9e9;
			}
			
			p {
				margin: 0
			}

			#all {
				background: black;
			}

			#left {
				float: left; 
				padding: 5px;
				background: blue;
				width: 200px; 
			}
			
			#leftUp {
			  box-sizing: border-box;
				opacity: 0.8;
				background-color: pink;
				width: 100%;
				height: 50%;
				padding: 5px; 
			}

			#leftDown {
			  box-sizing: border-box;
				opacity: 0.8;
				background-color: indigo;
				width: 100%;
				height: 50%;
				padding: 5px;
			}

			#center {
				display: block;
        overflow: hidden;
				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%;
			}
＆＃13; 
<body>

  <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="right">
      <div id="rightUp">
        <p>Hi, I'm rightUp</p>
      </div>
      <div id="rightDown">
        <p>Hi, I'm rightDown</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>

</body>
＆＃13;
＆＃13;
＆＃13;

我也不了解您的尺寸偏好......

答案 3 :(得分：0)

两个原因是你没有得到你对样品的期望。

首先应该在居中面板之前调用所有浮动面板。

然后，如果中心面板的尺寸大于页面尺寸，它将返回到该线。

中心面板的

仅通过以下方式更改css类：

#center {
        display: inline-block;
        padding: 5px;
        background: red;
        width: 30%;
        position:absolute;
        }

我建议你用百分比来操纵你的面板。 我把30％放在我的样本中，但只是为了让你选择你想要的那个。

相关问题
最新问题