4

好的，我在 2001 年开始使用 html 和 css。我曾经做过这样的事情（创建一个具有“垂直列”布局的网站）：

<html>
<head>
    <title>Vertical-column layout</title>
</head>
<body>
<table id="doc" >
<!-- header -->
    <tr>
    <td id="header" colspan="3"><!-- header code/php include --></td>
    </tr>
<!-- / header -->

<!-- / content -->
    <tr>
    <td id="col1" name="menu"><!-- content code/php include --></td>
    <td id="col2" name="content_left"><!-- content code/php include --></td>
    <td id="col3" name="content_right"><!-- content code/php include --></td>
    </tr>
<!-- / content -->

<!-- footer -->
    <tr>
    <td id="footer" colspan="3"><!-- header code/php include --></td>
    </tr>
<!-- / footer -->
</table>
</body>
</html>

很容易，一切都按照我想要的方式自动对齐，没有 css 头痛等。那时的生活很好。但是，不久前，我读到不应再使用这种方法。我打算使用一堆 div 尝试一种新方法，但是 w3c 和 w3c 的验证不喜欢你使用块元素作为内联元素...... WTF ！！！

所以......我的挫败感让我问你们：

如何？如何以“现代方式”完成这样的事情......尽可能简单？html 5有更好的方法吗？
为什么？为什么现在我们不应该使用这种表格方法在网站上获得“垂直列布局”？

为什么 RVM 会为不同的 gemset 安装重复的 gem？

因此，我为我的每个 rails 项目创建了一个单独的 rvm gemset。他们都使用相同版本的 ruby1.9.3​​ 。

这会导致bundle install为两个项目完全安装一组新的 gem。另一个项目是否在另一个 gemset 中安装了完全相同版本的 gem 并不重要。我猜这对我来说是预期的行为，但这似乎是对硬盘空间和带宽的低效使用。

我知道我可以手动将其中一些 gem 移动到全局 gemset，但这对我来说似乎很乏味，而且如果我的依赖项针对特定项目发生更改，也容易中断。

有没有更好的方法来组织事物，或者让 rvm 自动检测何时已安装 gem 版本并使用该副本？

或者我应该使用 RVM 的更好替代方案吗？

4

3 回答 3

6 
HOW?

选项 1：谷歌“CSS 3 列布局”。在过去 6 年左右的时间里，这已经得到了很好的覆盖，并且那里有大量的教程。

选项 2：谷歌“CSS 框架”并选择一个来构建您的布局。960.gs 很受欢迎。

WHY?

理想情况下，您会使用表格来存储表格数据，并使用 css 来布局页面的其余部分。为什么？嗯，理论上，CSS 给了你更多的灵活性。最好的例子可能是响应式网页设计。在 iPhone 上，我可能需要 2 列。在我的 iPad 上，我可能需要 4 列。这一切都可以通过 CSS 完成，但如果使用表格硬连接 HTML，就会变得非常复杂。

于 2012-06-04T19:57:15.583 回答
5

下面是我拼凑的一个基本网格，你可以在任何规模的网站上使用。您需要使用溢出隐藏或 clearfix 清除列上的浮动。如果您的项目不需要支持 IE7，您可以使用 box-sizing border-box 为您的列添加填充，否则在每列中添加一个额外的元素用于填充。

虽然我可以理解，使用表格制作列非常容易，这几乎是唯一更适合布局的东西。

HTML：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <header></header>

    <div class="content grid">
        <div id="col1" class="col s1of3"></div>
        <div id="col2" class="col s1of3"></div>
        <div id="col3" class="col s1of3"></div>
    </div>

    <footer></footer>

</body>
</html>

CSS：

.grid {
}
    .grid .col { float: left; }

    .grid .col.s1of1 { width: 100%; }
    .grid .col.s1of2 { width: 50%; }
    .grid .col.s1of3 { width: 33.33333333%; }
    .grid .col.s2of3 { width: 66.66666666%; }
    .grid .col.s1of4 { width: 25%; }
    .grid .col.s3of4 { width: 75%; }
    .grid .col.s1of5 { width: 20%; }
    .grid .col.s2of5 { width: 40%; }
    .grid .col.s3of5 { width: 60%; }
    .grid .col.s4of5 { width: 80%; }
于 2012-06-06T15:31:16.863 回答
2

CSS3 有一些简洁的列布局选项，但它们在兼容性方面不是很好，并且大量浏览器不支持相当数量的选项。

如果您正在寻求制作可变/固定宽度的列，那么这可能是您正在寻找的文章：

http://www.alistapart.com/articles/holygrail

使用此方法，您可以将一个或多个 div 设置为固定宽度，同时适当调整另一个 div 的大小以填充页面。

如果您只想调整所有列的大小，那么只需将它们全部设置float: left为width: {percentage of page}%

于 2012-06-04T19:58:17.917 回答