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中執行此操作？

來源

2009-05-26 Jagd

嘗試float: left;上#centerTop或display: inline在所有三個沒有任何浮游物。

來源

2009-05-26 23:12:43

這工作正常，但這取決於你需要什麼。如果你不知道內容的高度，你想讓它動態地擴展，那麼這是不夠的：

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

來源

2009-05-26 23:30:25

我只是測試的代碼從原來的職位在Firefox 3.0.10，歌劇9.64，和IE8谷歌瀏覽器2.0.181.1

所有的瀏覽器顯示所有3個div，沒有一個div從屏幕上掉下來......你可能使用IE6嗎？

來源

2009-05-26 23:45:02 KdgDev

我正在運行您的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中添加你想要的任何內容。

希望這有助於:)

來源

2009-05-27 00:12:14 Lycana

另一種解決方案：

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

來源

2009-05-27 04:13:53

我不知道它會消失，但它會下拉一條線。由於這個原因，很多網站都將其排除在外（我知道我是這麼做的）。

另一種選擇：

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

不知道你是否想這樣定義寬度。

來源

2009-05-27 04:32:52

使用相對定位交換的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。

來源

2009-05-27 05:09:37

css和div標記佈局問題

回答

相關問題