Question

我没有太多的CSS经验，我想实现如下所示的布局：

A具有相应的边div B，C具有相应的边div D。 B和D都被隐藏，只有在点击A时，才会显示B，点击C即可D。

A和B，C和D的顶部对齐，B和D的高度与{{1}不同}和A。

enter image description here

我试过的是下面的，它不起作用，我没有把它们放在同一行，但我想保留html结构，任何人都可以帮我指出去的方向？

Answer 1

首先你需要创建两个div：左和右（观看附件图像）。左div为150px，右为100px（宽度为约）。下一步是这个div的位置一个接一个。要正确div，你需要设置float：left到两个块。接下来就是将你的积木放在右边，我也隐藏了＃34; #hidden＆＃34;块最后一步将是 - 填充你的块。这是我的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;
}

enter image description here

Answer 2

我认为这样的事情应该有效 - 它不是真的很好＆＃34;但应该工作......

＆＃13;

<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>

＆＃13;

连续的不同列高

2 个答案: