css和div标记布局问题

问题描述：

我有一个标题栏横跨我的网页，它由一个div标记和三个嵌套的div标记组成。css和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标签，那么右侧div就会从网页中消失！我猜测它与float和text-align属性有冲突。

任何人对这里发生了什么有什么想法，或者是否有更简单的方法在CSS中执行此操作？

答

尝试float: left;上#centerTop或display: inline在所有三个没有任何浮游物。

答

这工作正常，但这取决于你需要什么。如果你不知道内容的高度，你想让它动态地扩展，那么这是不够的：

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

答

我只是测试的代码从原来的职位在Firefox 3.0.10，歌剧9.64，和IE8谷歌浏览器2.0.181.1

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

答

我正在运行您的HTML和CSS的FF 3.0.10。当您将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; 
}

所以你在的div从左依次排列的HTML通知中心到右。在这个CSS中，这已经通过将LEFTTOP和CENTRETOP divs左移。您还会注意到，我已经在LEFTTOP和CENTERTOP div上指定了一个宽度属性，以使您能够根据需要将div分隔得很宽。（你可以直观地看到你的宽度修改，因为我已经添加到div的边框）。在RIGHTTOP div上没有应用宽度百分比属性，因为它将消耗剩余的60％宽度（在LEFTTOP和CENTRETOP消耗了40％之后）。

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

然后你可以在RANDOMCONTENT div中添加你想要的任何内容。

希望这有助于:)

答

另一种解决方案：

设置leftTop，centerTop和rightTop到显示：表细胞，
将顶栏显示：表格行,
将容器设置为display：table
设置容器和行（＃table-bar）的宽度为100％;
将列的宽度设置为期望的比例（例如，左右25％，中心50％）
caveat：表格，表格行和表格单元格css显示值不起作用IE 5.5或6（也许Opera 8）;但它们在所有当代浏览器中都能很好地工作。 IE条件句可以用来为IE> 5和IE 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>

答

我不知道它会消失，但它会下拉一条线。由于这个原因，很多网站都将其排除在外（我知道我是这么做的）。

另一种选择：

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

然后把<br style="clear:both"/>你闭上你的顶栏的div权利之前。

<div id="top-bar"> 
    <div id="leftTop"> 
     LEFT 
    </div> 
    <div id="centerTop"> 
     CENTER 
    </div> 
    <div id="rightTop"> 
     RIGHT 
    </div> 
    <br style="clear:both"/> 
</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过程中更改column source ordering。

css和div标记布局问题

相关推荐