15

以下のようなシンプルなレイアウトを作成したいと思います。

Divレイアウト

誰かが私がこれを達成する方法を教えてもらえますか？「率直さ」をご容赦ください。私はC＃のバックグラウンドを持っているので、WEBUIの開発は少し大変です。

更新： 私はと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のすべてについてサポートが必要な場合に、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

流動的な左列と固定右列の2列divレイアウト
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
これらのリンクは、2列レイアウトの処理方法を示しています。最初に左と右の2つの列を作成し、その後、左の列に対して再度実行します。

于 2012-11-27T13:50:38.777 に答える
1

960.gsのようなCSSグリッドシステム、またはTwitterのブートストラップは、レイアウトを希望どおりに機能させるのに大いに役立ちます。

于 2012-11-27T13:52:08.590 に答える