0

我再次陷入了CSS定位。我想创建一个页面，在中间显示一个，周围有 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

这是如何运作的？你说你不希望布局随着屏幕大小的变化而改变，所以我让它使用固定宽度并放在包装器内，这样就不会发生。

演示

#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 回答
1

Oups，已经接受了答案：$

无论如何，因为我正在研究它，所以这是一个通用的解决方案。这个想法是你总是numberOfsquares/2 -1在顶部和底部有正方形，并且总是在左边有一个正方形，在右边有一个正方形。

这是一个小提琴：http: //jsfiddle.net/PyU87/

它将根据取决于浏览器大小的包装器大小显示。所以这也适用于智能手机。

于 2012-11-21T13:37:34.987 回答