1

htmlとcssを使ってこのようなものを描く必要があります。私はそうすることができません。

          _____________________
          |      |      |     |  
          |______|      |_____|
          |                   |  
          |______        _____|
          |      |       |    |
          |______|_______|____|

メジャーdiv、外側の長方形を作成してから、4つのネストされたdiv、小さい長方形を作成しました。左側2については、左に浮かせ、他の2つは右に浮かせました。しかし、それは私が望むものではありません。誰かが私に何をすべきか教えてもらえますか？

4

3 に答える 3

2

絶対ポジショニングを使用するここでフィドルを参照http://jsfiddle.net/NPALD/

<div id="outer">
    <div id="NW"></div>
    <div id="NE"></div>
    <div id="SW"></div>
    <div id="SE"></div>
</div>
​
#outer
{
    width:300px;
    height: 300px;
    border:solid 1px red;
    position: relative;
}
#NW, #NE, #SW, #SE {
    position: absolute;
    width: 100px;
    height: 100px;
    border: solid 1px green;
}
#NW
{
    top: 0;
    left: 0;
}
#NE
{
    top: 0;
    right: 0;
}
#SW
{
    bottom: 0;
    left: 0;
}
#SE
{
    bottom: 0;
    right: 0;
}​
于 2012-08-16T22:55:26.700 に答える
2

これを達成するには、アブソリューションポジショニングを使用する必要があります。各内部divの絶対位置には、、、、の2つがあるか、top0に設定されます。leftrightbottom

次に例を示します。

<html>
    <head>
        <title>CSS Based layouts</title>

        <style type="text/css">
            #rect {
              width: 300px;
                height: 300px;
                position: relative;
              border: 1px solid black;
            }

            #topleft {
              position: absolute;
              top: 0;
                left: 0;
              border: 1px solid black;
            }

            #bottomleft {
              position: absolute;
              bottom: 0;
                left: 0;
              border: 1px solid black;
            }

            #topright {
              position: absolute;
              top: 0;
                right: 0;
              border: 1px solid black;
            }

            #bottomright {
              position: absolute;
              bottom: 0;
                right: 0;
              border: 1px solid black;
            }

        </style>

    </head>
    <body>
        <h1>CSS Based layouts</h1>
        <p></p>

        <div id="rect">

            <div id="topleft">
                Top and Left
            </div>
            <div id="bottomleft">
                Bottom and Left
            </div>
            <div id="topright">
                Top and Right
            </div>
            <div id="bottomright">
                Bottom and Right
            </div>

        </div>

    </body>
</html>
于 2012-08-16T22:57:40.050 に答える
0

レイアウトは表形式のように見えるので、テーブルを試してみましょう。

http://jsfiddle.net/cvTak/2/

<table>
    <tr>
        <td class="t l">Top Left</td>
        <td class="t r">Top Right</td>
    </tr>
    <tr>
        <td class="b l">Bottom Left</td>
        <td class="b r">Bottom Right</td>
     </tr>
</table>​

table {
    border-collapse: collapse;
    border: 1px solid blue;
}
td {
    width: 100px;
    height: 100px;
}
.l {
    border-right: 100px solid yellow;
}

.t {
    border-bottom: 100px solid yellow;
}
​
于 2012-08-16T23:02:55.083 に答える