Question

我有一个横向跨越我的网页的标题栏，它由一个div标签和三个嵌套的div标签组成。

HTML：

<div id="top-bar">
    <div id="leftTop">
        LEFT
    </div>
    <div id="rightTop">
        RIGHT
    </div>
    <div id="centerTop">
        CENTER
    </div>
</div>

CSS：

#top-bar
{
    margin: 0;
    padding: 1px 4px;
    font-size: x-small;
    background-color: #005555;
    font-family: Arial;
}
#top-bar .separator
{
    padding: 0 7px;
    border-right: 0px solid #fff;
    border-left: 0px solid #fff;
}
#leftTop
{
    display: inline;
    float: left;
}
#rightTop
{
    display: inline;
    float: right;
}
#centerTop
{
    color: #ffffff;
    text-align: center;
}

它的效果很好，除了在HTML代码中div标签乱序的事实，我不喜欢这样。如果我通过将div标签放在HTML中的左侧，中间和右侧来订购div标签，那么Right div就会从网页上消失！我猜这与浮动和text-align属性有冲突有关。

任何人对此处发生的事情都有任何想法，或者在CSS中有更简单的方法吗？

Answer 1

在所有三个float: left;或#centerTop上尝试display: inline，没有任何花车。

Answer 2

这很好，但这取决于你需要什么。如果你不知道内容的高度，并希望它动态扩展，那么这还不够：

    #leftTop
    {
        float: left;
    }
    #rightTop
    {            
        float: right;
    }
    #centerTop
    {
        float:left;
        text-align: center;
    }

Answer 3

我刚测试了Firefox 3.0.10，Opera 9.64，IE8和Google Chrome 2.0.181.1中原始帖子的代码

所有浏览器显示所有3个div，而不是单个div从屏幕上掉下来......你是否正在使用IE6？

Answer 4

我正在运行FF 3.0.10的HTML和CSS。当您将CENTERTOP div重新排列在LEFTOP和RIGHTTOP div之间时，RIGHTTOP div不会“脱离页面”，但“RIGHT”文本会掉到下一行。

我的解决方案在下面提出（你会注意到我有一些补充和一些最佳实践技巧）。

HTML CODE：

<html>
<head>
    <link rel="stylesheet" href="global.css">
</head>
<body>
    <div id="top-bar">
        <div id="leftTop">
                LEFT
        </div>
        <div id="centerTop">
            CENTER
        </div>
        <div id="rightTop">
                RIGHT
        </div>
    </div>
    <div class="clearer">
    </div>
    <div id="randomContent">
            RANDOM CONTENT
    </div>
</body>

CSS代码：

#top-bar {
    margin: 0;
    font-family: Arial;
}

#leftTop {
    float: left;
    width: 20%;
    border: 1px solid red;
}

#centerTop {
    float: left;
    width: 20%;
    border: 1px solid blue;
}

#rightTop {
    border: 1px solid green;
}

.clearer {
    clear: both;
}

#randomContent {
    background-color: yellow;
}

因此，您会在HTML中注意到div按照从左到右的顺序排列。在这个CSS中，左移LEFTTOP和CENTRETOP div反映了这一点。您还会注意到我在LEFTTOP和CENTERTOP div上指定了一个width属性，以便您可以根据需要将div分隔开来。（当我在div上的边框中添加时，您将能够直观地看到您的宽度修改）。 RIGHTTOP div上没有应用宽度百分比属性，因为它将消耗剩余的60％宽度（在LEFTTOP和CENTRETOP消耗了40％之后）。

我还添加了一个CLEARER div。想想CLEARER div是一个水平线断裂。从本质上讲，它充当一系列分界线，将浮动的div与下面的内容分开。

然后，您可以在RANDOMCONTENT div中添加所需的任何内容。

希望这会有所帮助：）

Answer 5

另一种解决方案：

将leftTop，centerTop和rightTop设置为 display：table-cell ，
将顶栏设为 display：table-row ，
将容器设置为 display：table
将容器和行的宽度（＃table-bar）设置为100％;
将列的宽度设置为所需的比例（例如，左右为25％，中心为50％）
警告：表格，表格行和表格单元格css显示值在IE 5.5或6（也许是Opera 8）中不起作用;但它们在所有当代浏览器中都能很好地工作。 IE条件可用于分割IE的代码＆gt; 5和IE＆lt; 7。

TEST：

<html>
<head>
<title>3 Column Header Test</title>
<style type="text/css">
body#abod {
background-color:#F5ECBD;
color:#000;
}
#hdrrow {
margin:0;
padding:0;
width:100%;
border:1px solid #0C5E8D;
display:table;
}
#top-bar {
margin:0;
padding:1px 4px;
width:100%;
font-size:100%;
background-color:orange;/*#005555;*/
font-family: Arial;
border:1px solid #000;
display:table-row;
}
#leftTop {
margin:0;
padding:0 16px;
width:24%;
text-align:left;
color:#000;
background-color:#F0DD80;
border:1px dashed #f00;
display:table-cell;
}
#centerTop {
margin:0;
padding:0 16px;
width:40%;
margin:0 auto;
text-align:center;
color:#000;
background-color:#F5ECBD;
border:1px dashed #f00;
display:table-cell;
}
#rightTop {
margin:0;
padding:0 16px;
width:24%;
text-align:right;
color:#000;
background-color:/*#F0DD80;*/transparent;
   /*shows the orange row color*/
border:1px dashed #f00;
display:table-cell;
}
#footer {
padding:25px;
color:#000;
background-color:#F5ECBD;
}
</style>
</head>
<body id="abod">
<div id="hdrrow">
    <div id="top-bar">
        <div id="leftTop">
        LEFT
        </div>
        <div id="centerTop">
         CENTER
         </div>
         <div id="rightTop">
         RIGHT
        </div>
    </div>
</div>
<h4 id="footer">Footer Lorem ipsum dolor sit amet</h4>
</body>
</html>

Answer 6

我不知道它消失了，但它会掉线。由于这个原因，很多网站将其排除在外（我知道我这样做了）。

另一种选择：

#top-bar
{

    margin: 0;
    padding: 1px 4px;
    font-size: x-small;
    background-color: #005555;
    font-family: Arial;
}
#top-bar .separator
{
    padding: 0 7px;
    border-right: 0px solid #fff;
    border-left: 0px solid #fff;
}
#top-bar>div
{
    float: left;
    width: 33%;

}
#rightTop
{
    text-align: right;
}
#centerTop
{
    color: #ffffff;
    text-align: center;
    width: 34%;
}

然后在关闭顶栏div之前放<br style="clear:both"/>。

<div id="top-bar">
    <div id="leftTop">
        LEFT
    </div>
    <div id="centerTop">
        CENTER
    </div>
    <div id="rightTop">
        RIGHT
    </div>
    <br style="clear:both"/>
</div>

不确定是否要像这样定义宽度。

Answer 7

使用相对定位来交换div浮动后的位置：

HTML

<div id="top-bar">
    <div id="leftTop">
        LEFT
    </div>
    <div id="centerTop">
        CENTER
    </div>
    <div id="rightTop">
        RIGHT
    </div>
</div>

CSS

#leftTop {
   width:33%;
   float:left;
}
#centerTop {
   width:33%;
   float:right;
   position:relative;
   right:33%;
}
#rightTop {
   width:33%;
   float:right;
   position:relative;
   left:33%;
}

我在Perfect Liquid Layouts中使用相同的流程来更改column source ordering。

css和div标签布局问题

7 个答案: