0

私はCSSの配置に再び行き詰まっています。真ん中に 1 つを表示し、他の 10 個のページに囲まれたページを作成したいと思います。もちろん、どの解像度でも同じに見えるはずです (モバイルを除く)。

しかし、画面サイズを変更すると、サイトの外観が変わり続けます。

  • HTML

    <div class="wrapper" id="wrapper">

    <div class="element" id="element-1">Lorem1</div>
    <div class="element" id="element-2">Ipsum2</div>
    <div class="element" id="element-3">Lorem3</div>
    <div class="element" id="element-4">Ipsum4</div>

    <div class="element" id="element-5">Lorem5</div>
    <span class="break"></span>

    <div class="background" id="background"><span>Neologizmo</span></div>

    <div class="element" id="element-8">Ipsum8</div>

    <div class="element" id="element-9">Lorem9</div>
    <span class="break"></span>
    <div class="element" id="element-10">M10</div>
    <div class="element" id="element-11">M11</div>
    <div class="element" id="element-12">12</div>



</div>

  • CSS

http://nopaste.info/f6d200c414.html

4

2 に答える 2

1

おっと、すでに回答を受け入れています:$

とにかく、私はそれに取り組んでいたので、ここに一般的な解決策があります。アイデアは、numberOfsquares/2 -1常に上下に正方形があり、常に左側に 1 つの正方形、右側に 1 つの正方形があるということです。

ここにフィドルがあります：http://jsfiddle.net/PyU87/

ブラウザのサイズに依存するラッパーのサイズに応じて表示されます。したがって、これはスマートフォンでも機能します。

于 2012-11-21T13:37:34.987 に答える
1

これはどのように作動しますか？画面のサイズが変わったときにレイアウトを変更したくないと言ったので、固定幅を使用してラッパー内に配置して、それが起こらないようにしました。

デモ

#wrapper {
    width: 450px;
    height: auto;
    padding: 10px;
}

div {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    float: left;
    margin: 5px;
}

#background {
    width: 212px;
    padding: 0;
}

</p>

于 2012-11-21T12:38:06.993 に答える