html - 如何在纯CSS中实现呢？ | 如何在纯CSS中实现呢

我有13个div元素，需要它看起来像这样：

即使看起来像是一张桌子的工作，我也不能使用桌子（长话短说，工作要求，照原样进行）

我无法添加或删除任何html元素，这是我可以对添加属性标签（例如类名）的元素进行的唯一修改。

这是我到目前为止的内容（很抱歉出现任何格式错误）

<html>
<head>
<style type="text/css">
    html, body {
        height: 100%;
        width: 100%;
        margin: 0px;
        text-align:center;
        vertical-align:middle;
    }

    body div {
        background-color: gray;
        height: 24%;
        width: 24%;
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        margin: 1px;
    }

    body div:first-child + div + div + div + div + div {
        background-color: gray;
        height: 48%;
        width: 48%;
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        margin: 1px;
    }
</style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
</body>
</html>

最佳答案

div { float: left; width: 25%; height: 100%; }
div.double {  width: 50% }
div.triple {  width: 75% }
div.center { text-align: center; }

第6个div的类为“ double”
第八分区有class =“ triple”

如果元素之间存在空格或换行符，则内联块优先级会增加少量边距。必须以负的左边距来代替，这在浏览器之间的方式有些不可预测。

如果第六个必须超过两行，则是另一种解决方案：

的CSS

div { float: left; width: 25%; height: 1em; }
div.double { width: 50% }
div.triple { width: 75% }
div.center { text-align: center; }

div#six { position: absolute; height: 2em; left: 25%; top: 2em; }

html

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div class="triple">5</div>
<div id="six" class="double center">6</div>
<div>7</div>
<div class="triple">8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>

边界和边距：

div {
float: left;
width: 24%;
height: 2em;
margin: 0.1em;
border: 0.1em solid #000;
}

div.double { width: 47.8% }
div.triple { margin-right: 48.8% }
div.center { text-align: center; }

div#six {
  position: absolute;
  height: 4.4em;
  left: 24.6%;
  top: 2.8em;
  line-height: 400%;
  border: 1px solid #185;
  color: #185;
}

http://codepen.io/anon/pen/xLHwy

关于html - 如何在纯CSS中实现呢？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25191642/