0

我需要#infoBardiv 和#actualCoverdiv 坐在 div 的右侧（旁边）#covers，但由于某种原因，cover 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

#infoBar在这种情况下，听起来您想要#coverArea浮动到 #covers 的右侧，而不是#covers浮动到其他两个的左侧。

尝试去掉浮动#covers并添加float: right;到#infoBar和#coverArea

于 2009-09-14T13:08:01.197 回答
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 回答