如何將CSS錶行的單元格大小與下一行的單元格大小分開？

我是一個完全的CSS初學者（這實際上是我寫的第一個CSS），也是初學HTML的人，所以請原諒我，如果我錯過了某些明顯的東西或者我犯了一些嚴重的錯誤。現在，對問題：如何將CSS錶行的單元格大小與下一行的單元格大小分開？

我想創建一個佈局，我偶然發現了一個問題，禁止我做我想做的事情。這裏是什麼，我有一個截圖：

The layout as it currently is.

我想要做的就是簡單地寫着「家」 div，「博客」等，使之寬，如下div S，有效使其以與側邊欄相同的Y結束。像這樣：

What I want to achieve.

HTML文件的主體包含background類div，該負責裝修的文字，而一切的不存在另一個div稱爲container。 container設爲display: table和裏面包含row類的兩個div S（標誌着display: table-row），含導航div和包含主欄和那些在第二第一（它們都是section類的，標記display: table-cell）。

這裏是整個文件，同時顯示的CSS，以及如何我試圖結構HTML：實現這個

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 


<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> 


<head> 
    <title>mini</title> 
    <style type="text/css"> 

     * { 
      font-family: "Ubuntu", Helvetica, Arial, sans-serif; 
      margin: 0; 
     } 

     body { 
      padding: 100px 0 0 0;   
      background: white; 
      color: #444444; 
     } 

     h1 { 
      font-size: 48px; 
      font-weight: bold; 
      letter-spacing: -0.083333em; 
      line-height: 1.3em; 
      text-transform: lowercase; 
     } 

     p { 
      line-height: 1.5em; 
     } 

     .container { 
      overflow: hidden; 
      padding: 24px 24px 24px 24px; 
      border-spacing: 35px 35px; 
      display: table; 
     } 

     .section { 
      position: relative; 
      padding: 24px 24px 24px 24px; 
      border-width: 1px; 
      border-style: solid; 
      border-color: #888888; 
      background: white; 
      display: table-cell; 
     } 

     .background { 
      position: absolute; 
      margin: -124px -124px -124px -124px; 
      z-index: -1; 
      float: right; 
      font-size: 54px; 
      line-height: 1em; 
      font-weight: bold; 
      color: #eeeeee; 
     } 

     .row {   
      display: table-row; 
     } 

     #sidebar { 
      width: 20%; 
     } 

     #navigation { 
      font-size: 24px; 
      font-weight: bold; 
      text-transform: lowercase; 
     } 

     #empty { 
     } 

    </style> 
</head> 



<body> 
    <div id="background" class="background"> 
     bgtext 
    </div> 

    <div id="foreground" class="container"> 
     <div class="row"> 
      <div id="navigation" class="section"> 
       navitext 
      </div> 
     </div> 
     <div class="row"> 
      <div id="mainbody" class="section"> 
       <h1>Main</h1> 
       maintext 
      </div> 
      <div id="sidebar" class="section"> 
       <h1>Sidebar</h1> 
       sidetext 
      </div> 
     </div> 
    </div> 
</body> 

</html>

來源

2013-01-09 Theodoros Chatzigiannakis

diplay：table type styles意味着你的CSS會像表格一樣工作。這可能不是你想要的。 –

我開始懷疑這一點。但是如果有一些方法可以將導航定義爲跨越兩列，那麼我想我們會找到某個地方。 –

一種方法是創建一個圍繞所有內容的包裝：

#wrapper { 
    width:960px; 
    position: relative; 
} 

<div id="wrapper"> 

    <div id="header">Header</div> 

    <! -- Other content related divs goes here --> 

</div>

header div現在會佔用盡可能多的空間，即960px。 wrapper div內的其他div也適用，除非另有說明（這是您要查找的內容）。

您可能想要通過margin: 0 auto將該div居中，以使您的網站在大屏幕上看起來不錯。

祝您好運:-)

來源

2013-01-09 17:33:53 Zar

這對我來說有點不清楚。你能通過'id'告訴我哪些div中的div應該用wrapper包裝嗎？我嘗試了幾種組合，但沒有達到預期的效果。 –

@TheodorosChatzigiannakis看看這個例子，它應該給你一個關於如何開始的好主意：http://jsfiddle.net/Y4kGb/4/ – Zar

-1

你沒有必要顯示：表或顯示：表細胞，因爲它不是用這個模板的設計很好的做法。如果你想給單元格填充，那麼有必要分別減少那個元素的寬度。以下可能會對您有所幫助。

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 


<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> 


<head> 
    <title>mini</title> 
    <style type="text/css"> 

     * { 
      font-family: "Ubuntu", Helvetica, Arial, sans-serif; 
      margin: 0; 
     } 

     body { 
      padding: 100px 0 0 0;   
      background: white; 
      color: #444444; 
     } 

     #wrapper{ 
      width:80%; 
      margin:auto; 
     } 

     #main{ 
      width:100%; 
     } 

     #navigation{ 
      border:black 1px solid; 
      float:left; 
      width:96%; 
      padding:2%; 
      margin-bottom:20px; 
     } 

     #mainbody{ 

      border:black 1px solid; 
      float:left; 
      width:75%; 

      height:auto; 
     } 

     #sidebar{ 
      border:black 1px solid; 
      float:right; 
      width:23%; 

      height:100%; 

     } 

    </style> 
</head> 



<body> 
    <div id="wrapper"> 
     <div id="navigation"> 
      Home | blog | forum | about 
     </div> 

     <div id="main"> 
      <div id="mainbody"> 
       <h1>Main</h1> 
        maintext maintext maintext maintext maintext maintext maintext maintext maintext 
        <br /> 
        maintext maintext maintext maintext maintext maintext maintext maintext maintext 
        <br /> 
        maintext maintext maintext maintext maintext maintext maintext maintext maintext 
        <br /> 
        maintext maintext maintext maintext maintext maintext maintext maintext maintext 
        <br /> 
        maintext maintext maintext maintext maintext maintext maintext maintext maintext 
        <br /> 
        maintext maintext maintext maintext maintext maintext maintext maintext maintext 
        <br /> 
        maintext maintext maintext maintext maintext maintext maintext maintext maintext 
        <br /> 
        maintext maintext maintext maintext maintext maintext maintext maintext maintext 
        <br /><br /> 

      </div> 
      <div id="sidebar"> 
       side bar 
      </div> 
     </div> 
    </div> 
</body> 

</html>

來源

2013-01-09 17:39:09

我不想在這個特定的佈局中使用JavaScript。話雖如此，我嘗試了你的第二種方法，但似乎沒有我想到的結果。很可能我沒有正確應用它（儘管你的答案已經足夠清楚了）。您能否使用我附加的HTML來應用您的解決方案，以便我能夠確切地瞭解您的意思？我還附上了我試圖實現的屏幕截圖，以防我的描述無效。（順便說一下，我沒有讓你失望。） –

任何使div顯示的原因：table和display：table-cell？ –

我想讓主邊欄和邊欄div並排顯示，並通過谷歌搜索，這是我發現的第一種方法。我誤解了它的目的嗎？ –

我不能完全確定你想要做什麼，但我想你的意思是你想在你的導航欄的錨之間間距相等。在那種情況下，不需要JavaScript。

我會使用居中的內聯塊與兩邊的隔離物，以便每個鏈接之間的距離與填充邊界相同。

見代碼：根據需要和享受您的新的導航欄

<!-- In style: --> 
... 
#navigation > .spacer { 
    display: inline-block; 
    width: 5%; 
    float: left; 
} 

#navigation > .navLink { 
    display: inline-block; 
    width: 22.5%; 
    float: left; 
    text-align: center; 
} 
... 

... 
<!-- Nav bar div --> 
<div id="navigation" class="section"> 
    <div class="spacer"> 
     &nbsp; 
    </div> 
    <div class="navLink"> 
     link1 
    </div> 
    <div class="navLink"> 
     link2 
    </div> 
    <div class="navLink"> 
     link3 
    </div> 
    <div class="navLink"> 
     link4 
    </div> 
    <div class="spacer"> 
     &nbsp; 
    </div> 
</div> 
...

格式！
希望有幫助！

來源

2013-01-09 18:19:44

謝謝，這是我想要補充的，但不是問題的答案。問題是關於擴展導航欄的* border *以匹配邊欄邊框的末尾。 –

如何將CSS錶行的單元格大小與下一行的單元格大小分開？

回答

相關問題