小编Akh*_*hil的帖子

如何在html水平定位三个div？

我正在创建一个横向分为三个部门的示例网站.我希望最左边的div为25%宽度,中间一个为50%宽度,右边为25%宽度,以便分区水平填充所有100%空间.

<html>
    <title>
    Website Title
    </title>

    <div id="the whole thing" style="height:100%; width:100%" >

        <div id="leftThing" style="position: relative; width:25%; background-color:blue;">
            Left Side Menu
        </div>

        <div id="content" style="position: relative; width:50%; background-color:green;">
            Random Content
        </div>

        <div id="rightThing" style="position: relative; width:25%; background-color:yellow;">
            Right Side Menu
        </div>

    </div>
</html>

Run Code Online (Sandbox Code Playgroud)

http://imgur.com/j4cJu

当我执行此代码时,div显示在彼此之上.我希望他们出现在彼此旁边!

我怎样才能做到这一点？

html css layout position

Akh*_*hil

2017 08-11

52
推荐指数

5
解决办法

14万
查看次数