HTML CSS позиционирование фрагментов - PullRequest
Новая
       7

HTML CSS позиционирование фрагментов

0 голосов
/ 14 сентября 2009

Мне нужно, чтобы #infoBar div и #actualCover div находились справа от (*) рядом с #covers div, но по какой-то причине div с обложками действует так, как будто его даже нет, и плавает вершина других дел. 

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Untitled Page</title>
        <style type="text/css">
            *
            {
                margin: 0;
                padding: 0;
            }
            #chooserContainer
            {
                border: solid 1px orange;
            }
            #coverArea
            {
                border: solid 1px red;
                width: 760px;
            }
            #covers
            {
                width: 150px;
                float: left;
                height: 600px;
                overflow-y: auto;
                overflow-x: hidden;
                border: solid 2px #BFDEFF;
                padding: 10px;
                background-color: #F0F7FF;
                margin-right: 30px;
            }
            #infoBar
            {
                height: 30px;
                border: solid 1px green;
                width: 600px;
            }
            #actualCover
            {
                width: 794px;
                height: 1123px;
                background-position: top left;
            }
        </style>
    </head>

    <body>
        <div id="chooserContainer">
            <div id="covers">
            </div>
            <div id="infoBar">
            </div>
            <div id="coverArea">
                <div id="actualCover">
                </div>
            </div>
            <div style="clear: both;"></div>
        </div>
    </body>
</html>

Ответы [ 2 ]

0 голосов
/ 15 сентября 2009

Вот, пожалуйста.

Рекомендуется сначала правильно настроить макет, прежде чем устанавливать отступы и поля. 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        #chooserContainer
        {
            background: #ccc;
            width: 911px;
        }

        #covers
        {
            width: 150px;
            float: left;
            height: 600px;
            overflow-y: auto;
            overflow-x: hidden;
            background-color: #0ff;
        }
        #infoBar
        {
            height: 30px;
            width: 600px;
            float: right;
            background: yellow;
        }
        #coverArea
        {
            width: 760px;
            float: right;
            background: #f60;
        }
        #actualCover
        {
            width: 794px;
            height: 600px;
        }
    </style>
</head>
<body>
    <div id="chooserContainer">
        <div id="covers">Coveres
        </div>
        <div id="infoBar">InfoBar
        </div>
        <div id="coverArea">CoverArea
            <div id="actualCover">ActualCover
            </div>
        </div>
        <div style="clear: both;"></div>
    </div>
</body>
</html>
0 голосов
/ 14 сентября 2009

В этом случае кажется, что вы хотите, чтобы #infoBar и #coverArea плавали справа от # обложек вместо #covers, плавающего слева от двух других.

Попробуйте снять число с #covers и добавить float: right; к #infoBar и #coverArea

...