15

我希望创建一个像下面这样的简单布局。

分区布局

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

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

4

5 回答 5

12

这可能会帮助您：

<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>
于 2012-11-27T14:00:29.823 回答
5

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

这可以使用带有 CSS 的 Float 规则来实现。这是一个链接

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

于 2012-11-27T13:54:18.657 回答
2 
<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%;
    }
于 2013-11-25T12:28:16.693 回答
1

具有流体左列和固定右列的两列 div 布局
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
这些链接告诉您如何处理两列布局。首先只需将其设置为左右两列，然后再为左侧列执行此操作。

于 2012-11-27T13:50:38.777 回答
1

CSS 网格系统，如960.gs或Twitter 的引导程序将极大地帮助使布局按照您的意愿工作。

于 2012-11-27T13:52:08.590 回答