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

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

css

Css 如何根据我的布局图片定位这个div？,css,Css,我正在做一个自我财务会计程序，但我要用html、css和php来做我有一个基本的布局，在头版有5个主要分区这里是模拟：我以前从来没有编码过，我很失败我希望这个布局与“桌面”兼容这是我的桌面版本我在1024x768屏幕上工作但我希望WebKit兼容所有浏览器，因为我希望它能够调整大小，如果它有点大或小我不确定是否需要他们，因为我可以把事情设置为100%，但这就是我的问题开始这是我到目前为止的工作我的问题是中间的三个div被右div重叠，请注意，它们是如何从左div到右div

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

我有一个基本的布局，在头版有5个主要分区

这里是模拟：

我以前从来没有编码过，我很失败

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

我在1024x768屏幕上工作

但我希望WebKit兼容所有浏览器，因为我希望它能够调整大小，如果它有点大或小我不确定是否需要他们，因为我可以把事情设置为100%，但这就是我的问题开始

这是我到目前为止的工作

我的问题是

中间的三个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;
}

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

当将某些内容向右浮动时，HTML总是需要排在任何其他HTML之前。右、左、静是最好的顺序
你总是想要层叠你的CSS。将全局样式放置在样式表的顶部。主体样式应该位于CSS的顶部，而不是底部
我添加了一个包装div来设置最小宽度。这样，内部内容将永远不会低于该宽度，确保内容不会重叠。然而，它们将根据需要进行扩展

很少需要设置

width:100%。这并不总是一件坏事，但你不应该费心设置它，除非你明确知道你需要它


我重新安排了一些内容，删除了一些JSFIDLE不需要的HTML 这是你的答案。
关键问题：
边缘
内部分区将所有中心分区分组
[非常重要]显示：内联块；-这将确保您的div与您定义的大小完全相同。如果不使用，它将使用100%的宽度和高度

.小组{
高度：768px；
}
.右侧，.左侧{
宽度：170px；
身高：100%；
背景颜色：黄色；
显示：内联块；
}
.左边{
浮动：左；
}
.右侧{
浮动：对；
}
.内部面板{
身高：100%；
利润率：0.170px；
}
.intab、.outtab{
身高：25%；
背景色：石灰；
不透明度：0.75；
}
.今天{
身高：50%；
背景色：暗灰色；
}
左侧
右侧
在里面
今日
出来
“我不能让这个布局像我想要的那样工作”--它应该如何工作？不要重叠，所有的东西都拉伸成像图片一样，基本上都像图片一样，我的就在那里，它还不是真正的布局，位置不好，所有的东西都在圈上谢谢你，你明白我想要什么了，，总有一天，上帝会报答你，你是一家价值数百万美元的公司的首席执行官。你能给我解释一下利润率到底在做什么吗？你只把利润率加到中间部分，但为什么这些数字会出现？在这种情况下，利润率又有什么作用？感谢页边空白，确保中间内容为侧面留出空间。基本色块布局将在没有边距的情况下工作。但你可能会发现，当你开始向中心添加内容时，你将需要边距。
<!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>