CSS：浮动和定位答案

【问题标题】：CSS:Float and positioningCSS：浮动和定位
【发布时间】：2012-11-21 21:37:34
【问题描述】：

我又被 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>

http://nopaste.info/f6d200c414.html

【问题讨论】：

你希望它是什么样子的？
Text div (Neologizmo) 应该居中，而所有其他 div 应该浮动（顶部 4 个，右/左 1 个，下方 4 个）

标签： css css-float positioning

【解决方案1】：

Oups，已经接受了一个答案：$

好吧，既然我正在研究它，这里有一个通用的解决方案。这个想法是你总是在顶部和底部有numberOfsquares/2 -1 方块，并且总是在左边有一个方块，在右边有一个方块。

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

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

【讨论】：

难以置信，谢谢你的努力：）这个更好
NP ！我给你的版本仍然是一个粗略的版本 :) 例如，你可以优化代码，如果你有超过 x 个正方形，你会在中心元素的一侧得到垂直 2 个正方形。在我的情况下，即使有 1000 个方格（希望你不会尝试 ^^），你也会在顶部有 499 个，在底部有 499 个，左边只有 1 个，右边只有 1 个。

【解决方案2】：

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

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

【讨论】：