与DIV CSS布局问题
问题描述：
我想创建一个CSS布局：与DIV CSS布局问题
- 2列
- 用的 100％的窗口的高度的每一列
- 左列应宽度的40％和 有两行，底行的高度应该是 20像素和顶部应占用的剩余空间
- 右列应是宽度为60％和 有两行，T的高度他排在第一位的应该是70％，最低的是30％。
我还希望能够在第二列上切换隐藏/显示并在其位置显示另一列。我知道如何隐藏和显示JavaScript，但我不知道如何将另一列放在第二列的位置，而不使用绝对定位。
这是两个不同的布局的例子，蓝色区域代表窗口大小，绿色是div，我没有标记列，但你应该能够看到有两列。此外，我与利润率会：0和padding：0，我留下的空间其间的div澄清布局：
http://imageshack.us/photo/my-images/535/layout1rt.png/
http://imageshack.us/photo/my-images/683/layout2z.png/
* UPDATE * 对不起所有愤怒我的问题生成。我已经搜索并尝试使用div，但还没有提出一个很好的解决方案。我没有真正适合100％，有一些像素差异，我会发布下面的代码。我先用framesets进行了设计，然后再创建表格，然后我认为我必须学习divs是如何真正起作用的。好几天后，搜索和阅读关于CSS浮动左，等我放弃了，并创建了这个帐户。 看来这对于理解它来制作我想要的布局的人来说是非常快的，这就是为什么我没有发布我的代码。我可以通过阅读和玩答案代码来学习，但是你是对的，我犯了一个错误。
我的代码在Mozilla中100％工作，但在IE中失败。 * UPDATE *
*更新2 我得到了这一切工作，但似乎是在IE中一个像素的错误，所以我不得不添加溢出：隐藏不了滚动条。不知道是什么原因？ 更新2 *
<html>
<head>
<script type="text/javascript">
function toggleSheet(){
if(document.getElementById("col3").style.display == "block"){
document.getElementById("col3").style.display = "none";
} else {
document.getElementById("col3").style.display = "block";
}
}
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
overflow:hidden;
}
#wrapper {
width: 100%;
height:100%;
}
#col1 {
float:left;
width: 40%;
height:100%;
background:blue;
}
#col2 {
float:right;
width: 60%;
height:100%;
background:red;
}
#col3 {
position:absolute;
width: 60%;
right:0;
height:100%;
background:black;
display:none;
}
#col1top {
height:100%;
margin-bottom: -20px;
background:purple;
}
#col2top {
height:70%;
background:green;
}
#col1bottom {
height: 20px;
background:brown;
}
#col2bottom {
height:30%;
background:yellow;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="col1">
<div id="col1top" onClick="toggleSheet();">
</div>
<div id="col1bottom">
</div>
</div>
<div id="col2">
<div id="col2top">
</div>
<div id="col2bottom">
</div>
</div>
<div id="col3">
</div>
</div>
</body>
</html>
感谢您的时间。
/100万年
答
你有问题吗？或者你只是想让每个人都为你做你的布局？ – 2011-05-22 03:11:14
它不应该很难实现你所展示的内容，但是到目前为止，无论你完成了什么，都可以发布代码，以便我们可以轻松解决问题。 – kobe 2011-05-22 04:26:53
你必须把一些code.so我们可以指导你，但我们不能为你做完整的事情。 – Anish 2011-05-22 06:38:47