0

#infoBardiv と#actualCoverdiv を 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>
4

2 に答える 2

0

どうぞ。

パディングとマージンを設定する前に、レイアウトを正しく設定することをお勧めします。

<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>
于 2009-09-14T20:37:17.220 に答える
0

この場合、 #covers の左側にフロートするのではなく、#covers の右側にフロートし#infoBarたいように聞こえます。#coverArea#covers

フロートを外して#coversと に追加float: right;し#infoBarてみてください#coverArea

于 2009-09-14T13:08:01.197 に答える