CSS Side-by-side Divs_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-07 11:40 出处：网络

In the following example i\'m trying to get the divs \"left\" and \"right\" to appear side-by-side. Obviously my understanding is flawed but what mistake have I made, because (in Chrome at least) they

相关专题：css next

In the following example i'm trying to get the divs "left" and "right" to appear side-by-side. Obviously my understanding is flawed but what mistake have I made, because (in Chrome at least) they do not appear side-by-side.

Thanks

<!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">
    开发者_如何学JAVA                Left
                </div>
                <div id="right">
                    Right
                </div>
                <div class="clear">
                </div>
            </div>
        </div>
    </body>
</html>

The problem was that you specified a 1.5em margin-top on #right. Take that out and it should work. Here's a working jsfiddle.

remove margin from #right

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

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

This fixes it for me:

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