CSS和div标签布局问题

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

它工作得很好，除了div标签在HTML代码中是乱序的（我不喜欢）。 如果我通过在HTML中将它们分别置于Left，Center和Right来对div标签进行排序，那么Right div就会从网页中消失！ 我猜想这与float和text-align属性有冲突有关。

任何人都对这里发生的事情有任何想法，或者在CSS中有更简单的方法可以做到这一点？

Answer 1

尝试float: left; 在#centerTop或display: inline在所有三个行上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代码：

<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 ，
将顶部栏设置为显示：table-row ，
将容器设置为显示：表
将容器和行的宽度（＃table-bar）设置为100％；
将列的宽度设置为所需的比率（例如，左右分别为25％，中心为50％）
注意：table，table-row和table-cell css显示值在IE 5.5或6（甚至Opera 8）中不起作用； 但它们在所有现代浏览器中都能很好地工作。 IE条件语句可用于拆分IE> 5和IE <7的代码。

测试：

<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浮动后，使用相对位置交换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”中使用相同的过程来更改色谱柱的源顺序。

CSS和div标签布局问题

问题描述

7 个解决方案

解决方案1
1 2009-05-26 23:12:43

解决方案2
0 2009-05-26 23:30:25

解决方案3
0 2009-05-26 23:45:02

解决方案4
0 2009-05-27 00:12:14

解决方案5
0 2009-05-27 04:13:53

解决方案6
0 2009-05-27 04:32:52

解决方案7
0 2009-05-27 05:09:37

CSS和div标签布局问题

问题描述

7 个解决方案

解决方案1 1 2009-05-26 23:12:43

解决方案2 0 2009-05-26 23:30:25

解决方案3 0 2009-05-26 23:45:02

解决方案4 0 2009-05-27 00:12:14

解决方案5 0 2009-05-27 04:13:53

解决方案6 0 2009-05-27 04:32:52

解决方案7 0 2009-05-27 05:09:37

解决方案1
1 2009-05-26 23:12:43

解决方案2
0 2009-05-26 23:30:25

解决方案3
0 2009-05-26 23:45:02

解决方案4
0 2009-05-27 00:12:14

解决方案5
0 2009-05-27 04:13:53

解决方案6
0 2009-05-27 04:32:52

解决方案7
0 2009-05-27 05:09:37