Question

我再次陷入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

Answer 1

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

DEMO

#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;
}

Answer 2

Oups已经接受了答案：$

好吧无论如何，因为我正在研究它，这是一个通用的解决方案。我们的想法是，您的顶部和底部始终有numberOfsquares/2 -1个方块，左侧一个正方形，右侧一个正方形。

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

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

CSS：浮动和定位

2 个答案: