HTML CSS 片段定位答案

【问题标题】：HTML CSS fragment positioningHTML CSS 片段定位
【发布时间】：2014-07-19 21:13:27
【问题描述】：

我需要将#infoBar div 和#actualCover div 放在#covers div 的右侧（旁边），但是由于某种原因，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>

【问题讨论】：

标签： html css positioning

【解决方案1】：

给你。

作为一个好的做法，在设置内边距和边距之前先让布局正确。

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

【讨论】：

【解决方案2】：

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

尝试去掉 #covers 的浮点数并将 float: right; 添加到 #infoBar 和 #coverArea

【讨论】：

它改变了行为吗？
确实做到了，事情并没有变得疯狂。您提到的那两个 div 位于最右侧和封面 div 下方
我喜欢 CSS...你也可以尝试保持浮动：left;在您的#covers 元素上，同时保持浮动：对；在另外两个上。