Html 在div中定位三个元素_Html_Css

Html 在div中定位三个元素

html css

Html 在div中定位三个元素,html,css,Html,Css,最后提供的示例代码说明了我的问题。基本上，我有一个DIV容器，其中包含左侧的一些工具，中间的主要内容，以及右边的一些工具（视觉左工具是提供拖动和视觉正确的工具是删除内容）。我通过分别浮动在左侧和右侧来实现定位，但是，如果我在主要内容上添加背景色，颜色会溢出到浮动在左侧而不是右侧的内容上（目前仅在firefox 3.5中测试）代码如下： <head> <style type="text/css"> #container{ width:500

最后提供的示例代码说明了我的问题。基本上，我有一个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>


#容器{
宽度：500；
}
.处理{
浮动：左；
}
.删除{
浮动：对；
}
梅因先生{
宽度：450；
背景色：ccc；
}
HH
X
这里的一些文字是asdf asdf asdf asdf asdf asd fasd fsa dfa df asdf SADFA sdf sadf asd fsa df asdf asdf asd asd asdf asdf asdf asd asdf asdf asd asd asd asdf asdf asd asdf asdf asd asdf asd asdf asd asd asd asd asdf asd asd asd asd asd asd asd asd asd asdf asd asd asd asd asd
HH
X
这里有一些文本asdf asdf asdf asdf asdf asdf asd asd fasd fsa dfa dfa df asdf sadfa sdf sadf asd fsa dfa asdf asdf asd asd asd asd asd asd asd fsa dfa dfa dfa dfa asdf sadfa sdf a sdf as

我可以用它得到你想要的东西

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


*{边框：实心1px黑色}
#容器{
宽度：500px；
}
.处理{
浮动：左；
}
.删除{
位置：相对位置；
右：50px；
浮动：对；
}
梅因先生{
宽度：390px；
填充：9px 30px；
背景色：ccc；
}

但这远远不够好。

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

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

请注意，第二个示例中有一个输入错误。背景色应该是“#ccc”而不是“ccc”。

不清楚您是否希望颜色覆盖所有颜色（左、主和右）。。或者只有中间的部分

无论如何。。如果你想让它涵盖所有。。您需要使主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;
}

将float:left添加到.main将修复它

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

查看在样式中添加

*{border:solid 1px black}

时会发生什么。

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

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