Question

我试图定位3 div。一个在左侧占据窗口的25％，一个在右侧，也占用了25％的wondow，最后一个占据了剩余的空间。我不知道该怎么做。

这是我到目前为止所做的：

HTML：

<div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>

的CSS：

#left {
    border: 2px solid blue;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    width: 25%;
}

#right {
    border: 2px solid blue;
    position: absolute;
    right: 0px;
    top: 0px;
    bottom: 0px;
    width: 25%;
}

#center {
    border: 2px solid red;
    position: absolute;
    right: 25%;
    top: 0px;
    bottom: 0px;
    width: 50%;
}

http://jsfiddle.net/Elfayer/VLjvK/

Answer 1

以下是实现这一目标的方法之一：

float所有div都转到left并指定height和width。

#center, #left, #right {
    float:left;
    height:100%;
}
#left, #right {
    width: 25%;
}
#center {
    width: 50%;
}

DEMO here.(with border)

DEMO here.(with background)

Answer 2

目前，边框正在贡献/增加div的宽度。

将此添加到您的CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

JSFiddle

许多人建议不要使用绝对定位作为主要布局方法。该站点可能会帮助您获得更灵活的解决方案。

Learn Layout

Answer 3

尝试这个..我已经删除了绝对定位。

        #left,#right, #center {
            height: 100%;
            float: left;
        }

        #left {
            background-color: red;
            width: 25%;
        }

        #right {
            background-color:green;
            width: 25%;
        }

        #center {
            background-color:yellow;
            width: 50%;
        }

Answer 4

左右侧边栏现在可以是任何宽度。主要宽度将是空间的其余部分。所有div都可以根据需要拥有自己的填充和边距。

http://jsfiddle.net/Elfayer/VLjvK/

HTML：

<div id="right">right</div>
<div id="left">left</div>
<div id="center">center</div>

的CSS：

div {
    box-sizing: border-box;
}

#left {
    border: 2px solid blue;
    width: 25%;
    float: left;
}

#right {
    border: 2px solid blue;
    width: 25%;
    float: right;
}
#center {
    border: 2px solid red;
}

Answer 5

喜欢这个吗？

EXAMPLE

我删除了absolute位置并将其更改为relative。

还添加了display:inline-block并更改了div的百分比以适应边框宽度

Answer 6

试试这个：

div {
    padding:0px;
    margin:0px;
    float:left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#left {
    border: 2px solid blue;
    width: 25%;
}

#right {
    border: 2px solid blue;
    width: 25%;
}
#center {
    border: 2px solid red;
    width: 50%;
}

Answer 7

看到这个小提琴：http://jsfiddle.net/VLjvK/8/

#left {
    width: 25%;
    float: left;
    background-color: blue;
}
#right {
    width: 25%;
    float: right;
    background-color: blue;
}
#center {
    width: 50%;
    float: left;
    background-color: red;
}

如何管理div定位？

7 个答案: