css 和 div 标签布局问题答案

【问题标题】：css and div tag layout problemscss 和 div 标签布局问题
【发布时间】：2012-07-03 03:41:36
【问题描述】：

我有一个横向跨越我的网页的标题栏，它由一个 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 代码中乱序，我不喜欢这一点。如果我通过将 div 标签放置在 HTML 中的 Left、Center 和 Right 来排序，那么 Right div 就会从网页中消失！我猜这与 float 和 text-align 属性发生冲突有关。

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

【问题讨论】：

标签： css html alignment

【解决方案1】：

在所有三个上尝试float: left; #centerTop 或display: inline，不要使用任何浮点数。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

所有浏览器都显示了所有 3 个 div，没有一个 div 从屏幕上掉下来...您可能使用的是 IE6 吗？

【讨论】：

【解决方案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 中添加您想要的任何内容。

希望这会有所帮助:)

【讨论】：

【解决方案5】：

我不知道它会消失，但它会下降一行。很多网站都因为这个原因把它弄乱了（我知道我这样做）。

另一种选择：

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

但不确定您是否希望这样定义宽度。

【讨论】：

【解决方案6】：

另一种解决方案：

将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 > 5 和 IE

测试：

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

【讨论】：

【解决方案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。

【讨论】：