一行中不同的列高

Question

本人经验不多CSS，想实现如下图的布局：

A有对应边divB，C有对应边divD。 B和D都被隐藏了，只有点击A才会出现B，点击C才会出现D。

A和B、C和D的顶部对齐，B和D的高度与A 和 C.

我试过如下，它不起作用，我不必将它们放在同一行中，但我想保留 html 结构，任何人都可以帮助我指出前进的方向？

<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet"/>

<style>
  .debug {
  border: solid;
  border-color: red;
  }  
</style>

<div class="row">
  <div class="six columns debug" style="height: 100px;">A</div>
  <div class="six columns debug" style="height: 300px;">B</div>
</div>

<div class="row">
  <div class="six columns debug" style="height: 100px;">C</div>
  <div class="six columns debug" style="height: 300px; display:none;">D</div>
</div>

Answer 1

首先，您需要创建两个 div：左和右（观看附件图片）。左边 div 将是 150px，右边是 100px（大约是宽度）。下一步是这个 div 一个一个的位置。向右 div 你需要设置 float: left 到两个块。下一步是将你的积木放在右边，我也隐藏“#hidden”积木最后一步是 - 填充你的积木。这是我的 JSFiddle.

HTML

<div id="main">
    <div id="left">
        <div class="ac">
            <div class="a"></div>
            <div class="c"></div>
        </div>
        <div id="second" class="ac">
            <div class="a"></div>
            <div class="c"></div>
        </div>
    </div>
    <div id="right">
        <div class="b"></div>
        <div id="hidden"></div>
        <div class="b"></div>
    </div>
</div>

CSS

#main {
    width: 280px;
    height: auto;
}

#left {
    width: 150px;
    float: left;
    height: auto;
}

#right {
    width: 100px;
    height: auto;
    margin-left: 30px;
    float: left;
}

.ac {
    height: 120px;
}

.a, .c {
    height: 50px;
    background-color: #3F86CE;
}

.c {
    margin-top: 20px;
}

#second { // You also can do this, with pseudo selector :ntn-child;
    margin-top: 150px;    
}

.b {
    height: 150px;
    background-color: #3F86CE;
}

#hidden {
    height: 150px;
    background-color: #fff;
    margin-top: 20px;
    visibility: hidden;
}

Answer 2

我认为像这样的东西应该有用——它不是真的"nice"但应该有用...

<html>
<head>
 <script>
  function switch_it(obj_id) { if (obj = document.getElementById(obj_id)) {if (obj.style.display != "none") { obj.style.display = "none"; }else { obj.style.display = "block"; }}}
  function switch_B() {
   if (obj = document.getElementById("B")) {
    if (obj.style.display != "none") {
     obj.style.display = "none";
     if (obj = document.getElementById("C")) { obj.style.cssFloat = "none"; }
    } else {
     obj.style.display = "block";
     if (obj = document.getElementById("C")) { obj.style.cssFloat = "left"; }
    }
   }
  }
 </script>
 <style>
  html, body, div { margin: 0; padding: 0; }
  .debug {
   border: 1px solid red;
  }
  #AB { margin-top: 20px;}
  #A, #B, #C, #D {
   font-size: 3em;
   text-align: center;
   width: 48%;
  }

  #A, #C { height: 100px; }
  #B, #D { height: 300px; }

  #A {
   height: 100px; display: block; background-color: rgba(50,50,100,.5);   color: rgba(50,50,100,.5);
   float: left;
  }
  #B {
   height: 300px; display: block; background-color: rgba(150,50,100,.5);  color: rgba(150,50,100,.5);
   float: right;
  }
  #C {
   height: 100px; display: block; background-color: rgba(200,200,100,.5);  color: rgba(200,200,100,.5);
   float: left;
  }
  #D {
   height: 300px; display: block; background-color: rgba(100,100,100,.5); color: rgba(100,100,100,.5);
   clear: right;
   float: right;
  }
 </style>
</head>
<body>
 <div id='AB'>
  <div id='A' class="six columns debug" onclick='switch_B()'>A</div>
  <div id='B' class="six columns debug">B</div>
 </div>
 <div id='CD'>
  <div id='C' class="six columns debug" onclick='switch_it("D")'>C</div>
  <div id='D' class="six columns debug">D</div>
 </div>
</body>

一行中不同的列高

different column height in a row

css

responsive-design

skeleton-css-boilerplate