HTML 中 <table> 布局的替代方案
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2130049/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Alternative to <table> layout in HTML
提问by jamesbtate
Right now I have a webpage set up to be exactly the size of the browser window with a couple overflow:scroll's in it.
现在我有一个网页设置为与浏览器窗口的大小完全相同，其中包含几个overflow:scroll。
Basically, the page is arranged in two columns and three rows of a table. I would like to not use tables for style/formatting so my question is how would I make this migration.
基本上，页面按表格的两列三行排列。我不想将表格用于样式/格式，所以我的问题是我将如何进行此迁移。
My page (in a nutshell):
我的页面（简而言之）：
<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>
The problem essentially is, I want to nest <div>s without putting a second nested <div>on a newline:
问题本质上是，我想嵌套<div>s 而不将第二个嵌套<div>在换行符上：
<div style="overflow:scroll;"> <div>stuff4</div><div>stuff4A</div> </div>
<div style="overflow:scroll;"> <div>stuff5</div><div>stuff5A</div> </div>
I want the above to display two scrollable areas on the same line and I can't use <textarea>because the text needs to be multiple colors (see link provided).
我希望上面的内容在同一行上显示两个可滚动区域，但我无法使用，<textarea>因为文本需要多种颜色（请参阅提供的链接）。
For those interested, the page will eventually be the staff side of a completely in-browser instant message tech support system for a university's CS department.
对于那些感兴趣的人来说，该页面最终将成为大学计算机科学系完全在浏览器中的即时消息技术支持系统的员工端。
回答by Mike D.
Well, the basic way you do this is to break your page up into six <div>s:
好吧，您执行此操作的基本方法是将您的页面分成六个<div>s：
<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>
Then you write some CSS:
然后你写一些CSS：
div.left {
float: left;
clear: both;
}
And you should get something like:
你应该得到类似的东西：
1 2
3 4
5 6
No nested <div>needed.
不需要嵌套<div>。
回答by Eli
You should generally mark up your content semantically and then style it.
您通常应该在语义上标记您的内容，然后对其进行样式设置。
It looks like you have five main areas:
看起来您有五个主要领域：
- messages
- user list
- controls
- input
- chatrooms
- 消息
- 用户列表
- 控制
- 输入
- 聊天室
Let's make some markup:
让我们做一些标记：
<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>
And a little bit of style:
还有一点风格：
.left{
clear:both;
}
.left div{
float: left;
}
#controls{
clear: both;
}
And you should be able to complete it from here. The most important part of most CSS layouts is proper floating.
你应该能够从这里完成它。大多数 CSS 布局中最重要的部分是适当的浮动。
回答by dhiman
New CSS grid option:
新的 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>
回答by Marcel Korpel
Thanks for the link, that explains a lot. Sounds familiar, I've done this before, but it can be pretty tricky.
感谢您的链接，这解释了很多。听起来很熟悉，我以前做过这个，但它可能非常棘手。
Before explaining the lot, I need to know whether you want to support IE6 with this. If so, you'll probably have to revert to IE quirks mode, as you will need the border-box box model (which can't be selected in another way in IE, and it's not possible to use both topand bottomproperties). If so, I recommend to put all other browsers in this box model, too, so you don't have to make two separate stylesheets for IE and the rest (yes, you'll still need some workarounds, of course). In short, after using this different box model you can have quasi top and bottom properties by styling using border-top and border-bottom, instead. They'll act like top and bottom, because they're now inside the given height (of, for instance, 100% of the viewport). I hope this is at least a bit understandable.
在解释很多之前，我需要知道你是否想用这个来支持 IE6。如果是这样，您可能必须恢复到 IE 怪癖模式，因为您将需要边框框模型（在 IE 中无法以其他方式选择，并且不可能同时使用top和bottom属性）。如果是这样，我建议也将所有其他浏览器放在这个盒子模型中，这样您就不必为 IE 和其他浏览器制作两个单独的样式表（是的，当然，您仍然需要一些变通方法）。简而言之，在使用这个不同的盒子模型之后，您可以通过使用 border-top 和 border-bottom 进行样式设置来获得类似的顶部和底部属性。它们的作用类似于顶部和底部，因为它们现在位于给定的高度内（例如，视口的 100%）。我希望这至少有点可以理解。
If not, than it's a bit simpler and you can style using fixed positioning and <div>getting topandbottomproperties. IIRC, this should also work in IE7+.
如果没有，那么它会更简单一些，您可以使用固定定位和<div>获取top以及bottom属性进行样式设置。IIRC，这也应该适用于 IE7+。
But first, tell me whether you need support for the buggy one or not...
但首先，请告诉我您是否需要对有问题的人的支持...
回答by Marcel Korpel
The problem with Eli's and Mike D.'s answers is that, if I understood this question correctly, puddingfox wants the three divs above eachother be spread over the total size of the viewport. In that case, you'll get problems coding IE6, because then you can't use both top and bottom properties on the same element (which is needed for the middle divs).
Eli 和 Mike D. 的答案的问题是，如果我正确理解了这个问题，puddingfox 希望彼此上方的三个 div 分布在视口的总大小上。在这种情况下，您将在编码 IE6 时遇到问题，因为这样您就不能在同一个元素上同时使用 top 和 bottom 属性（中间 div 需要它）。
