dppcyt6157 2014-12-15 05:08
浏览 137
已采纳

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

My Current project consists of a window which includes a Horizontal Navigation Menu, a Vertical Navigation Menu, a set of buttons and finally a Table .

So the structure is like this

enter image description here

1. Div of Horizontal Navigation Menu
2. Div of Vertical Navigation Menu
3. Div with a set of buttons
4. Div with a Table inside

I tried it today, as per my work, The 1st and 2nd DIVS positioned correctly. when come to 3rd and 4th DIVS its not positioning correctly.

so i tried code like following

<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>

but 3rd div not aligning properly when I tested it in systems with different resolutions. So

  1. how to align that 3rd div to the EXTREME RIGHT of window and 4th div to the Centre of the window(centre of above white window)

  2. and how to make 3rd and 4th Window fixed at that position even Window minimized to smaller.

Any help on this problem would be greatly appreciated.

  • 写回答

1条回答 默认 最新

  • douyi2664 2014-12-15 05:26
    关注

    Something like this?.

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

    Else post some of you CSS also. then i can have a look again. Greeetz

        #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;
    }
    

    展开全部

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
编辑
预览

报告相同问题?

手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部