Question

我的问题在最后提供的示例代码中说明。基本上，我有一个div容器，左边是一些工具，中间是主要内容，右边是一些工具（可视化左侧工具是提供拖动，右侧视觉工具是删除内容）。我分别通过左右浮动实现了定位，但是，如果我在主要内容上添加背景颜色，颜色会溢出到左侧漂浮但不在右侧的东西（目前仅在Firefox 3.5中测试过）

以下代码：

<head>
    <style type="text/css">
    #container{
        width:500;
    }
    .handle{
        float:left;
    }
    .delete{
        float:right;
    }
    .main{
        width:450;
        background-color:ccc;
    }
    </style>
</head>
<div id="container">
<div class="c"><p class="handle">HH</p><p class="delete">X</p><p class="main">Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as asd fasd fas dfa sdf asdf as dfas df dasf asd fas df asdf asdf asd fasd fasdf asdf asdf asdf as df asdf asdf asd fas df asdpf asdf asdf asd fas dfa sdf asdf asd fas df</p></div>

<div class="c"><p class="handle">HH</p><p class="delete">X</p><p class="main">Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as </p></div>
</div>

Answer 1

我可以用

得到你想要的东西

<style type="text/css">
*{border:solid 1px black}
#container{
    width:500px;
}
.handle{
    float:left;
}
.delete{
    position:relative;
    right:50px;
    float:right;
}
.main{
    width:390px;
    padding:9px 30px;
    background-color:ccc;
}
</style>

但远非好事。

Answer 2

如果您的目的是仅为使用“.main”类指定的元素提供背景颜色，则需要对HTML标记和CSS进行以下更改：

将“main”类指定的元素移动到标记为“handle”和“delete”的元素之间。

<div class="c">
<p class="handle">...</p>
<p class="main">...</p>
<p class="delete">...</p>
</div>

将“float：left”添加到“.main”

中的样式

.main{
  ...
  float:left;
}

请注意您的第二个例子中有拼写错误。背景颜色应为“#ccc”而不是“ccc”。

Answer 3

目前尚不清楚您是希望颜色覆盖所有颜色（左，主，右）还是只覆盖中间div。

无论如何..如果你想要它覆盖所有..你需要使主div的宽度等于容器的宽度..试试这个，例如

 .main{
     width:500;
     background-color:ccc;
 }

另一方面，如果你想让颜色只在主div中，那么你必须让它漂浮在左边..这样的事情

.handle{
    float:left;
    clear: left;
}
.delete{
    float:right;
    clear: right;
}
.main{
    width:450;
    background-color:ccc;
    float: left;
}

Answer 4

将float：left添加到.main将修复它。

下载ColorZilla firefox插件或Firebug，您将看到发生了什么。你的.handle会浮动在你的.main中，这就是为什么背景是#ccc。

在div中定位三个元素

4 个答案: