Question

我需要#infoBar div和#actualCover div位于#covers div的右边（但旁边），但由于某种原因，封面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>

Answer 1

在这种情况下，听起来您希望#infoBar和#coverArea浮动到#covers的右侧而不是#covers浮动到另外两个的左侧。

尝试从#covers开始，将float: right;添加到#infoBar和#coverArea

Answer 2

你走了。

作为一种好习惯，在设置填充和边距之前，首先要确保布局正确。

<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>

HTML CSS片段定位

2 个答案: