替代<table> HTML中的佈局

Question

所以現在我有一個網頁設置與瀏覽器窗口的大小完全相同，其中有幾個overflow:scroll。基本上這個頁面安排在一個表格的兩列和三列中。我想不使用表格的樣式/格式，所以我的問題是我將如何進行這種遷移。

我的頁面（簡單地說）：

<table> 
<tr> 
    <td> 
     <div style="overflow:scroll;"> 
      <div> 
       stuff1 
      </div> 
      <div> 
       stuff1A 
      </div> 
     </div> 
    </td> 
    <td> 
     <div style="overflow:scroll;"> 
      <div> 
       stuff2 
      </div> 
      <div> 
       stuff2A 
      </div> 
     </div> 
    </td> 
</tr> 
<tr> 
    <td> 
      <input type="submit"><input type="submit"><input type= "submit"> 
    </td> 
    <td> 
      <input type="submit"><input type="submit"><input type="submit"> 
    </td> 
</tr> 
<tr> 
    <td> 
    <textarea>stuff3</textarea></td> 
    <td><select multiple> 
     </select></td> 
</tr> 

的問題本質上是我想窩<div>沒有把第二個嵌套<div>上一個新行：

<div style="overflow:scroll;"> <div>stuff4</div><div>stuff4A</div> </div> 
<div style="overflow:scroll;"> <div>stuff5</div><div>stuff5A</div> </div> 

我希望以上顯示在同一行上的兩個可滾動區域，我不能使用<textarea>，因爲文本需要多種顏色（s ee鏈接提供）。對於那些有興趣的人來說，該頁面最終將成爲大學CS部門的完全瀏覽器即時消息技術支持系統的工作人員一方。

Answer 1

嘛，你這樣做是爲了打破你的頁面分成了6點<div>是基本的方法：

<div class="left" id="l1">1</div> 
<div class="right" id="r1">2</div> 
<div class="left" id="l2">3</div> 
<div class="right" id="r2">4</div> 
<div class="left" id="l3">5</div> 
<div class="right" id="r3">6</div> 

然後你寫一些CSS：

div.left { 
    float: left; 
    clear: both; 
} 

，你應該得到這樣的：

1 2 

3 4 

5 6 

不需要嵌套<div>。

Answer 2

您應該通常在語義上標記您的內容，然後對其進行設計。

看起來你有五個主要方面：

• 消息
• 用戶列表
• 控制
• 輸入
• 聊天室

讓我們做一些標記：

<div class="left"> 
    <div id="messages"> 
     messages 
    </div> 
    <div id="user-list"> 
     user-list 
    </div> 
</div> 
<div id="controls"> 
    controls 
</div> 
<div class="left"> 
    <div id="input"> 
     input 
    </div> 
    <div id="chatrooms"> 
     chatrooms 
    </div> 
</div> 

和風格一點點：

.left{ 
    clear:both; 
} 
    .left div{ 
     float: left; 
    } 
#controls{ 
    clear: both; 
} 

而且你應該能夠在這裏完成。大多數CSS佈局最重要的部分是適當的浮動。

Answer 3

感謝您的鏈接，這解釋了很多。聽起來很熟悉，我以前做過這個，但它可能非常棘手。

在解釋這個地段之前，我需要知道你是否想用這個來支持IE6。如果是這樣，您可能必須恢復到IE怪癖模式，因爲您需要邊框框模型（在IE中無法以其他方式選擇，並且不能同時使用top和bottom屬性） 。如果是這樣，我建議將所有其他瀏覽器都放在這個盒子模型中，所以你不必爲IE和其他版本製作兩個單獨的樣式表（當然，你仍然需要一些解決方法）。總之，在使用這個不同的盒子模型後，你可以通過使用邊框頂部和邊框底部的樣式來獲得準頂部和底部屬性。他們會像頂部和底部一樣行事，因爲他們現在處於給定高度（例如，視口的100％）內。我希望這至少可以理解。

如果不是，比它的簡單一點，你可以使用固定的定位和<div>越來越top和bottom性能風格。 IIRC，這也應該在IE7 +中工作。

但首先，告訴我你是否需要馬車一個或不支持......

Answer 4

的問題，以利的和Mike D.的回答是，如果我理解正確這個問題，puddingfox希望相互之上的三個div分佈在視口的總大小上。在這種情況下，你會遇到編碼IE6的問題，因爲那樣你不能在同一個元素上使用頂部和底部屬性（這是中間div所需要的）。

Answer 5

新建CSS網格選項：

<style> 
#grid { 
    display: grid; 
    grid-template-columns: 20% 20% 20%; 
} 
</style> 

<div id="grid"> 
    <div>first</div> 
    <div>second</div> 
    <div>thrid</div> 
    <div>fourth</div> 
    <div>fifth</div> 
    <div>sixth</div> 
    <div>seventh</div> 
    <div>eighth</div> 
    <div>nineth</div> 
</div>