HTML5 上的 CSS 布局答案

【问题标题】：CSS layout on HTML5HTML5 上的 CSS 布局
【发布时间】：2012-03-27 17:58:40
【问题描述】：

我正在用 HTML5 和 js 开发一个 Web 应用程序。我在其中使用了一些“Canvas”标签。所以我想在屏幕上像这样构造它们：

我已经通过使用诸如 margin-right、margin-left、top、position 之类的 CSS 标记来实现它。问题是当我使用这些css标签时，我或多或少地将整个布局调整到一个屏幕上，不幸的是我的目标是支持任何可能的屏幕。

也许有布局方面的专业人士可以帮助解决这个特殊问题。

附：更改窗口大小时，不应调整画布大小

【问题讨论】：

你需要更具体一点：当屏幕尺寸改变时会发生什么？例如，左右的画布是否应该变小？中间的应该变小吗？两个都？两者都不？它们应该按比例减少吗？
不，当窗口大小改变时什么都不会发生，srry，忘了指定
我相信我已经为您所寻找的内容提供了解决方案
是的，这正是我所要求的，在我知道之前提出的解决方案之前

标签： css html layout html5-canvas

【解决方案1】：

也许使用像 twitter bootstrap 这样的 css 框架是个好主意。

它针对不同的屏幕尺寸和跨浏览器而构建。它还提供responsive design。

看看gridsystem。

关于一个画布在另一个画布中：

<div class="row">
  <div class="span4">
    <div class="row">
      <div class="span4">..</div>
      <div class="span4">..  </div>
      <div class="span4">..</div>
    </div>
  <div class="span8">...</div>
</div>

您可以对列进行“无限”嵌套，请参阅上面链接的文档中的“嵌套列”。

【讨论】：

看起来不错，但我想使用不太健壮和简单的解决方案
Boris 使用网格系统可能是“最简单”的解决方案。除了处理可能的黑客攻击之外，您还需要对 CSS 有更多了解才能自己实现它。
我现在正在处理您的两个提案，从示例中这似乎很容易，但我不太确定我是否需要您提出的任何项目中的所有文件。 . 它基本上是我所需要的，但是以一种非常非常扩展的方式
但是还有一个问题没有解决，我应该如何将一个画布放在另一个画布中，因为如果我使用你的两个建议，我将需要使用“移动”功能，如填充或边距，在为了在另一个图层中调整一个图层
感谢您的建议，这将扩展我的知识:)

【解决方案2】：

我为你制作了一个演示。

我相信this 是你想要的。

HTML：

<div id="wrapper">
    <div id="col1">
        <div class="canvas">Canvas-Left-1
            <div class="innercanvas">Canvas-Left-1-1</div>
        </div>
        <div class="canvas">Canvas-Left-2
            <div class="innercanvas">Canvas-Left-2-1</div>
        </div>
    </div>

    <div id="col2">Canvas 0</div>

    <div id="col3">
        <div class="canvas">Canvas-Rigt-1
            <div class="innercanvas">Canvas-Right-1-1</div>
        </div>
        <div class="canvas">Canvas-Right-2
            <div class="innercanvas">Canvas-Right-1-1</div>
        </div>
    </div>
</div>

CSS

* {margin: 0; padding: 0;}
#wrapper {display: block; margin: 0 auto; width: 1000px; background-color: green; overflow: auto;}
#col1 {display: inline-block; width:200px; background-color: gray; position: relative; float: left;}
#col2 {display: inline-block; width:600px; background-color: yellow; position: relative; float: left;}
#col3 {display: inline-block; width:200px; background-color: blue; position: relative; float: left;}
.canvas {background-color: black; margin: 10px; color: white}
.innercanvas {background-color: purple; margin: 10px; color: white}

【讨论】：

【解决方案3】：

Boris 您需要为每个区域使用外部容器来实现它（即 3 个外部 div，每列一个，以及一个“主”div 使用百分比和最大值定位到屏幕中间/min 宽度来控制所需的输出）。

或者为自己省点麻烦，使用类似的流体网格系统：

您可能还想看看here，这里有一些关于流体布局的简洁信息。

【讨论】：

感谢您的建议，这将扩展我的知识:)