CSS 并排 div答案

【问题标题】：CSS Side-by-side DivsCSS 并排 div
【发布时间】：2011-11-25 09:55:41
【问题描述】：

在下面的示例中，我试图让 div“左”和“右”并排显示。显然我的理解是有缺陷的，但我犯了什么错误，因为（至少在 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>

【问题讨论】：

标签： css html next

【解决方案1】：

这为我解决了这个问题：

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

【讨论】：

【解决方案2】：

从#right 中删除边距

    #right {
   /* margin: 1.5em 0 0 0.5em;*/
    padding: 0;
    float: right;
    background: #888;
    width: 8em;
    }

http://jsfiddle.net/x5qaf/1/

【讨论】：

【解决方案3】：

问题是您在#right 上指定了 1.5em 的上边距。把它拿出来，它应该工作。这是working jsfiddle。

【讨论】：