Question

我正在制作一个自我财务会计程序但我会用html，css和php来做它

我的首页有5个主要div的基本布局

这里是模拟： http://s24.postimage.org/le9yrx4np/divs.jpg

我之前没有编码而且我很难做到

我希望此布局与“桌面”兼容，这是我的桌面版

我的工作基于1024 x 768屏幕

但我希望webkits兼容所有浏览器，因为我希望能够调整大小，如果它更大或更小我不确定是否需要他，因为我可以设置100％的东西，但那是我的问题开始

这是我到目前为止的工作

http://jsfiddle.net/dhJPS/

我的问题是

中间的三个div正在被右边的div重叠，注意到它们不是从左边div到右边div的中心
我似乎无法理解浮动的概念我不能让这个布局像我想要的那样工作

无论如何，如果你能帮助我一点点，我很感激!!

感谢

#leftside {
background-color: blue;
width: 170px;
height: 770px;
float: left;

}

#intab {
background-color: yellow;
width: 100%;
height: 297px;


}

#currentday {
background-color: white;
width: 100%;
height: 170px;



}

#outtab {
background-color: yellow;
width: 100%;
height: 297px;


}

#rightside {
background-color: black;
height: 770px;
width: 200px;
float: right;
margin-top: -765px;
}



* { 
margin: 0px;
padding: 0px;
list-style-type: none;  

}


body {
text-align: center;
display: block;
}
img {
border: none;
}

Answer 1

你只需要重新安排一些事情。

当向右移动某些内容时，HTML总是需要先于任何其他HTML。右，左，静是最好的顺序。
您总是希望级联CSS。将全局样式放在样式表的顶部。正文样式应位于CSS的顶部，而不是底部。
我添加了一个包装器div来设置最小宽度。这样，内部内容将永远不会低于该宽度，确保事物永远不会重叠。但是，它们会根据需要进行扩展。
您很少需要在CSS中设置width: 100%;。这并不总是坏事，但除非你明确知道自己需要，否则你不应该费心去做。

我重新排列了一些内容，并删除了一些jsFiddle不需要的HTML .... UPDATED FIDDLE HERE

Answer 2

这是你的答案。关键问题：余量内部div将所有中心组合分组

[非常重要]显示：内联块; - 这将确保您的div将是您定义的确切大小。如果不使用，它将使用100％的宽度和高度

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <style>
        .panels {
            height: 768px;
        }

        .rightside, .leftside {
            width: 170px;
            height: 100%;
            background-color: yellow;
            display: inline-block;
        }

        .leftside {
            float: left;
        }

        .rightside {
            float: right;
        }

        .innerPanels {
            height: 100%;
            margin: 0 170px;
        }

        .intab, .outtab {
            height: 25%;
            background-color: lime;
            opacity: 0.75;
        }
        .currentday{
            height: 50%;
            background-color: darkgray;
        }
    </style>
</head>
<body>

<div class="panels">
    <!--LEFT SIDE -->
    <div class="leftside">left side</div>
    <!-- RIGHT SIDE -->
    <div class="rightside">right side</div>

    <div class="innerPanels">
        <!-- IN -->
        <div class="intab">in</div>
        <!-- CURRENT DAY -->
        <div class="currentday">current day</div>
        <!-- OUT -->
        <div class="outtab">out</div>
    </div>

</div>
</body>
</html>

我如何根据我的布局图片定位这个div？

2 个答案:

[非常重要]显示：内联块; - 这将确保您的div将是您定义的确切大小。如果不使用，它将使用100％的宽度和高度