css，固定大小_Css_Html - Fatal编程技术网

css，固定大小

css html

css，固定大小,css,html,Css,Html,我需要三张桌子。窗口的左侧和右侧占据了空闲窗口的50%。中心是固定的一切似乎都很好，但马上就要从桌子上跳下来了 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml

我需要三张桌子。窗口的左侧和右侧占据了空闲窗口的50%。中心是固定的

一切似乎都很好，但马上就要从桌子上跳下来了

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<style type="text/css">
body{
    margin:0;
    padding:0;
}
#left{
    float: left;
    width: 50%;
    background: #FDA02E;
    margin-left: -300px;
}
#center{
    float: left;
    width: 600px;
    margin-right: 300px;
    background: #C8FF98;
}
#right{
    float: left;
    width: 50%;
    margin-left: -300px;
    background: #FDE95E;
}
</style>
</head>
<body>
<div id="pag">
    <div id="left">
        Left
    </div>
    <div id="center">   
        Center
    </div>
    <div id="right">
        Right
    </div>
</div>
</body>
</html>


身体{
保证金：0；
填充：0；
}
#左{
浮动：左；
宽度：50%；
背景：#FDA02E；
左边距：-300px；
}
#居中{
浮动：左；
宽度：600px；
右边距：300px；
背景：C8FF98；
}
#对{
浮动：左；
宽度：50%；
左边距：-300px；
背景#FDE95E；
}
左边
居中
赖特

我看不出这背后的想法，但这里有一个可行的版本：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<style type="text/css">
body{
    margin:0;
    padding:0;
}
#left{
    float: left;
    width: 50%;
    background: #FDA02E;
}
#center{
    position: absolute;
    width: 600px;
    left: 50%;
    margin-left: -300px;
    background: #C8FF98;
}
#right{
    float: right;
    width: 50%;
    margin-left: -300px;
    background: #FDE95E;
}
</style>
</head>
<body>
<div id="pag">
    <div id="left">
        Left
    </div>
        <div id="center">   
        Center
    </div>
    <div id="right">
        Right
    </div>
</div>
</body>
</html>


身体{
保证金：0；
填充：0；
}
#左{
浮动：左；
宽度：50%；
背景：#FDA02E；
}
#居中{
位置：绝对位置；
宽度：600px；
左：50%；
左边距：-300px；
背景：C8FF98；
}
#对{
浮动：对；
宽度：50%；
左边距：-300px；
背景#FDE95E；
}
左边
居中
赖特

此解决方案在内容上没有重叠。（我在侧栏中添加了边框以显示这一点）


身体{
保证金：0；
填充：0；
}
#左包装{
宽度：50%；
浮动：左；
右边距：-600px；
右侧填充：300px；
}
#左{
右边距：300px；
背景：#FDA02E；
边框：1px纯黑；
}
#居中{
浮动：左；
宽度：600px；
右边距：-300px；
背景：C8FF98；
}
#右包装{
宽度：50%；
浮动：左；
}
#对{
左边距：300px；
背景#FDE95E；
边框：1px纯黑；
}
左


中心















右

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<style type="text/css">
body{
    margin:0;
    padding:0;
}
#left-wrapper{
    width: 50%;
    float: left;
    margin-right: -600px;
    padding-right: 300px;
}
#left {
    margin-right: 300px;
    background: #FDA02E;
    border: 1px solid black;
}
#center{
    float: left;
    width: 600px;
    margin-right: -300px;
    background: #C8FF98;
}
#right-wrapper{
    width: 50%;
    float: left;
}
#right {
    margin-left: 300px;
    background: #FDE95E;
    border: 1px solid black;
}
</style>
</head>
<body>
<div id="pag">
    <div id="left-wrapper">
        <div id="left">
            Left<br><br>
        </div>
    </div>
    <div id="center">   
        Center<br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
    <div id="right-wrapper">
        <div id="right">
            Right<br><br><br><br>
        </div>
    </div>
</div>
</body>
</html>