CSS Side-by-Divs - PullRequest
Новая
       11

CSS Side-by-Divs

2 голосов
/ 26 сентября 2011

В следующем примере я пытаюсь, чтобы элементы 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>

Ответы [ 3 ]

4 голосов
/ 26 сентября 2011

Проблема заключалась в том, что вы указали 1.5em margin-top на #right. Возьми это, и это должно сработать. Вот рабочий jsfiddle .

0 голосов
/ 26 сентября 2011

Это исправляет это для меня: 

#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;
}
0 голосов
/ 26 сентября 2011

убрать поле из # справа 

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

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

...