Question

我想创建一个css布局：

2栏
每列高度为100％窗口
左列宽度应为40％有两行，底行的高度应该是 20px和top应该占用剩下的空间
右列宽度应为60％有两排，顶行的高度应为70％和底部 30％。

我还希望能够在第二列上切换hide / show并在其位置显示另一列。我知道如何使用javascript隐藏和显示但我不知道如何将其他列放在第二列的位置而不使用绝对定位。

以下是两个不同布局的示例，蓝色区域表示窗口大小，绿色是div，我没有标记列，但您应该能够看到有两列。另外我要使用margin：0和padding：0，我在div之间留下空格来澄清布局：

http://imageshack.us/photo/my-images/535/layout1rt.png/

http://imageshack.us/photo/my-images/683/layout2z.png/

*更新* 抱歉，我的问题产生了所有的愤怒。我用Google搜索并试验了div，但还没有找到一个好的解决方案。我有一个非常适合100％，有一些像素差异，我将发布下面的代码。我首先使用框架集进行设计，然后是表格，然后我认为我必须了解div在某些时候是如何工作的。好几天后搜索和阅读关于css浮动左右等等我放弃并创建了这个帐户。似乎对于理解它的人来说，制作我想要的布局会非常快，这就是为什么我没有发布我的代码。我可以通过阅读和播放答案代码来学习，但你是对的，我犯了一个错误。

我的代码在Mozilla中100％运行但在IE中失败。 *更新*

*更新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万年

Answer 1

回答这真是一件荒谬的事，但我很无聊。

http://jsfiddle.net/m7TuJ/embedded/result/

无论如何都不是最佳解决方案，但它可以实现您的要求。

div css布局问题

1 个答案: