Html - Css 在一个窗口中对齐 3 个 Div答案

【问题标题】：Html - Css Aligning 3 Divs in a windowHtml - Css 在一个窗口中对齐 3 个 Div
【发布时间】：2015-02-13 14:18:02
【问题描述】：

我的当前项目由一个窗口组成，其中包括一个水平导航菜单、一个垂直导航菜单、一组按钮，最后是一个表格。

所以结构是这样的

1. Div 水平导航菜单
2. 垂直导航菜单的Div
3. Div 带有一组按钮
4. Div 里面有一个表格

我今天试了一下，根据我的工作，第一个和第二个 DIVS 定位正确。当来到第 3 和第 4 DIVS 时，它的定位不正确。

所以我尝试了如下代码

<div style="float:left;"> // That white window
    <div style="float:right"> // Yellow div
        buttons.....
    </div>
    <div style="float:left"> // Orange div
        <Table>....</table>
    </div>
</div>

但是当我在不同分辨率的系统中测试第三个 div 时，它没有正确对齐。所以

如何将第 3 个 div 对齐到窗口的 EXTREME RIGHT 和第 4 个 div 到窗口的中心（上方白色窗口的中心）
以及如何使第三和第四窗口固定在该位置，即使窗口最小化到更小。

对于这个问题的任何帮助将不胜感激。

【问题讨论】：

发布所有的css和html。
也许你在第三格需要position:fixed？

标签： php html css styles css-float

【解决方案1】：

像这样？

http://jsfiddle.net/jmtyjhpq/3/embedded/result/

另外发布一些 CSS。那我可以再看看。格利兹

    #wrapper
{
    margin:0px;
    padding:0px;
    height:100%;
    width:100%;    
}

.divone
{
    width:100%;
    height:300px;
    background-color:blue;
}
.divto
{
    position: relative;
    height:900px;
    width:250px;
    float:left;
    background-color:green;
}

.divthree
{
    float:right;
    width:250px;
    height:150px;
    background-color:yellow;
    display:block;
    margin-right:50px;
    position:relative;
}

.divfor{
    float:right;
    width:600px;
     height:600px;
    background-color:gray;
    margin-top:180px;
}

【讨论】：