HTML DIV 布局答案

【问题标题】：HTML DIV LayoutHTML DIV 布局
【发布时间】：2012-11-15 03:41:52
【问题描述】：

我希望创建一个如下所示的简单布局。

有人可以告诉我如何实现这一目标吗？请原谅“坦率”，我来自 C# 背景，所以开发 WEB UI 对我来说有点令人生畏。

更新： 我正在玩弄 's 和 CSS，但没有产生我想要的东西。

【问题讨论】：

为什么有人给这个问题-1？请解释一下
@MikroDel 我给了这个问题 -1，因为它非常广泛和模糊 - 你可能最好在谷歌上搜索“带有 css 的列”而不是在这里提问
感谢评论）现在他或她知道出了什么问题
如果 html 布局是火箭科学，那么它就太宽泛了。但事实并非如此。正确回答所述问题的答案的长度表明它不是太宽泛。

标签： html

【解决方案1】：

这可能会对您有所帮助：

<body>
<div style="border: 1px solid; float: right; width: 25%; height: 1000px;" id="1">one</div>
<div style="border: 1px solid; height: 250px; width: 74%;" id="1">two</div>
<div style="border: 1px solid; width: 35%; float: right; height: 750px;" id="1">three</div>
<div style="border: 1px solid; width: 35%; height: 750px;" id="1">four</div>
</body>

【讨论】：

一个

两个

三个

四个

【解决方案2】：

虽然我们可以写出实现此布局所需的所有代码，但如果您不了解 CSS，这对您无益。但是，我们可以为您指明正确的方向。

这可以通过使用带有 CSS 的 Float 规则来实现。 Here's a link

还应该对 HTML 有良好的基本理解，以便在语义上进行布局。如果您需要所有帮助，Codecademy 将带您了解 HTML 和 CSS。

【讨论】：

【解决方案3】：

<HTML>
    <HEAD>
        <TITLE>Working with div</TITLE>
        <META CHARSET="UTF-8" />
    </HEAD>
    <BODY>

        <link rel=stylesheet href="div.css" type="text/css">


        <div class="a2">two</div>
        <div class="a1">one</div>
        <div class="VerticalSpace"></div>
        <div class="a3">three</div>
        <div class="HorizontalSpace"></div>
        <div class="a4">four</div>

    </BODY>
</HTML>

div.css文件的内容是

    .a1, .a2, .a3, .a4
    {
        border: 4px solid;
    }

    .VerticalSpace, .HorizontalSpace
    {
        border: 0px;
        float: left;
    }

    .a2
    {
        height: 250px;
        float: left;
        width: 74%;
    }

    .a3
    {
        height: 350px;
        float: left;
        width: 35%;
    }

    .a4
    {
        height: 350px;
        float: left;
        width: 35%;
    }

    .a1
    {
        height: 617px;
        width: 23%;
        float: right;
    }

    .VerticalSpace
    {
        width: 60%;
        height: 10px;
    }

    .HorizontalSpace
    {
        height: 350px;
        width: 4%;
    }

【讨论】：

【解决方案4】：

Two column div layout with fluid left and fixed right column
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
这些链接告诉您如何处理两列布局。首先只需将其设置为左右两列，然后再为左侧列执行此操作。

【讨论】：

【解决方案5】：

CSS 网格系统，如 960.gs 或 Twitter's bootstrap 将极大地帮助您让布局按照您的意愿工作。

【讨论】：