CSS并排Divs_Css_Html_Next - Fatal编程技术网

CSS并排Divs

css html

CSS并排Divs,css,html,next,Css,Html,Next,在下面的例子中，我试图让div“left”和“right”并排出现。显然，我的理解是有缺陷的，但我犯了什么错误，因为（至少在Chrome中）它们并没有并排出现谢谢 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:l

在下面的例子中，我试图让div“left”和“right”并排出现。显然，我的理解是有缺陷的，但我犯了什么错误，因为（至少在Chrome中）它们并没有并排出现

谢谢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <style type="text/css" media="screen">
        body {
                margin: 0;
                padding: 0;
                background: #ffffff;
                text-align:center;
            }
            #container {
                margin: 100px auto 100px auto;
                padding: 0;
                background: #eeeeee;
                text-align:left;

                width: 49.5em;
            }
            #title {
                margin: 2em;
                padding: 0;
                background: dddddd;

                width: 49.5em;
            }
            #graphics {
                margin: 0;
                padding: 0;
                height:200px;
                background: #cccccc;

                width: 49.5em;
            }
            #navigation {
                margin: 0;
                padding: 0;
                background: #bbbbbb;

                height:3em;
                width: 49.5em;
            }
            #wrapper {
                margin: 0;
                padding: 0;
                background: #aaaaaa;

                width: 49.5em;
            }
            #left, #right {
                margin: 0;
                padding: 0;
                float: left;
                background: #999999;

                width: 41em;
            }
            #right {
                margin: 1.5em 0 0 0.5em;
                padding: 0;
                float: right;
                background: #888888;

                width: 8em;
            }

            .clear {
                margin: 0;
                padding: 0;
                height: 0;
                font-size: 1px;
                line-height: 0;
                clear: both;
            }
            </style>
    </head>
    <body>
        <div id="container">
            <div id="title">Title</div>
            <div id="graphics">Graphics</div>
            <div id="menu">Menu Item</div>
            <div id="wrapper">
                <div id="left">
                    Left
                </div>
                <div id="right">
                    Right
                </div>
                <div class="clear">
                </div>
            </div>
        </div>
    </body>
</html>


身体{
保证金：0；
填充：0；
背景：#ffffff；
文本对齐：居中；
}
#容器{
保证金：100px自动100px自动；
填充：0；
背景：#eeeeee；
文本对齐：左对齐；
宽度：49.5em；
}
#头衔{
边缘：2米；
填充：0；
背景：dddd；
宽度：49.5em；
}
#图形{
保证金：0；
填充：0；
高度：200px；
背景:#中交;；
宽度：49.5em；
}
#航行{
保证金：0；
填充：0；
背景:#bbbbbb；
高度：3em；
宽度：49.5em；
}
#包装纸{
保证金：0；
填充：0；
背景：AAAAA；
宽度：49.5em；
}
#左，#右{
保证金：0；
填充：0；
浮动：左；
背景#999999；
宽度：41em；
}
#对{
保证金：1.5em 0.5em；
填充：0；
浮动：对；
背景:#888888；
宽度：8em；
}
.清楚{
保证金：0；
填充：0；
身高：0；
字号：1px；
线高：0；
明确：两者皆有；
}
标题
绘图
菜单项
左边
赖特

问题是您在

#右侧

上指定了1.5em的边距。把它拿出来，它应该会起作用。这是一个。

从#右侧删除边距

这为我修复了它：

#left {
    margin: 0;
    padding: 0;
    float: left;
    background: #999999;
    width: 41em;
}

#right {
    /* margin settings moved the box*/
    padding: 0;
    float: right;
    background: #888888;
    width: 8em;
}

#left {
    margin: 0;
    padding: 0;
    float: left;
    background: #999999;
    width: 41em;
}

#right {
    /* margin settings moved the box*/
    padding: 0;
    float: right;
    background: #888888;
    width: 8em;
}